JSOM中的角度4投掷错误找不到SP [英] JSOM in angular 4 throwing error Cannot find SP

问题描述

我是Angular 4的新手，需要一些帮助。我正在尝试为O365创建一个SharePoint托管添加，并使用angular 4来构建UI。

无任何调用SP我的角度APP工作正常。但不是我想查询SharePoint。我不知道从哪里开始，但是看一些博客，我使用了来自'@ microsoft / sp-loader'的导入{SPComponentLoader}

但是现在当我运行我的应用程序时，我的JSOM代码会抛出错误。以下是我的代码

 import {Component，OnInit}来自"@ angular / core";来自"./ product.service"的
 import {ProductService};来自'@ microsoft / sp-loader'的
 import {SPComponentLoader}; 
 
 @Component（{
 selector：" pm-products"，
 templateUrl：" ./ product-list.component.html"，
 styleUrls： [" ./ product-list.component.css"] 
}）
 
导出类ProductListComponent实现OnInit 
 {
 pageTitle：string =" Product Listt" ;; 
 imageWidth：number = 50; 
 imageMargin：number = 2; 
 showImage：boolean = false; 
 _listFilter：string ="" ;; 
 
构造函数（private _productService：ProductService）{
 
 
} 
 
 get listFilter（）：string {
 return this ._listFilter; 
}; 
 
 set listFilter（value：string）{
 this._listFilter = value; 
 this.filteredProducts = this.listFilter？ this.performFilter（this.listFilter）：this.products; 
}; 
 
 filteredProducts：any []; 
 
产品：任何[]; 
 
类别：任何[] = [{
" CategoryID"：1 
}，
 {
" CategoryID"：2 
} 
]; 
 
 toggleImage（）：void 
 {
 var context = SP.ClientContext.get_current（）; 
 var website = context.get_web（）; 
 context.load（网站）; 
 context.executeQueryAsync（function（）{alert（website.get_title（））}，function（）{alert（" Failed"）;}）; 
 
} 
 
 performFilter（value：string）：any [] 
 {
 value = value.toLocaleLowerCase（）; 
 
返回this.products.filter（（product）=> product.productName.toLocaleLowerCase（）。indexOf（value）！= -1）; 
} 
 
 onRatingClicked（message：string）：void {
 this.pageTitle =" Product List" +消息; 
} 
 
 ngOnInit（）
 {
 // alert（" Init"）; 
 console.log（" on init"）; 
 this.listFilter ="" ;; 
 this.products = this._productService.getProducts（）; 
 this.filteredProducts = this.products; 
 var tempResponse = this._productService.getCategories（）。subscribe（resp => this.categories = resp.value，
 error => console.log（error））; 
 
} 
 
} 

解决方案

对于这种情况，我建议你开发SPFx所以你可以从SharePoint在线现代页面中受益。

这里有一些链接关于带角度的SPFx作为参考。

http://www.sebastienlevert.com/2017/07/ 31 / SharePoint的框架和 - 角INTR oducing-the-spfx-angular-boilerplate /

http://www.sebastienlevert.com/2017/08/01/sharepoint-framework-and-angular-walkthrough-of-the-spfx-angular-boilerplate/

https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-angular/

您可以通过以下指南了解SPFx。

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

如果您确实想要使用angular4开发SharePoint加载项，可以按照以下主题进行操作。

https：// www .infopulse.com / blog / tutorial-visual-studio-2017-angular-4-sharepoint-online-add-in /

https://github.com/AlexanderShapoval/demo.sharepoint.angular4

 

最好的问候，

利

I am new to Angular 4 and need some help. I am trying to create a SharePoint hosted add in for O365 and using angular 4 to build the UI.

Without any calls to SP my angular APP works fine. But not I want to query SharePoint. I am not sure first where to start but looking at some blogs I used import { SPComponentLoader } from '@microsoft/sp-loader'

But now when I run my app my JSOM code throws error. Below is my code

import { Component, OnInit } from "@angular/core";
import { ProductService } from "./product.service";
import { SPComponentLoader } from '@microsoft/sp-loader';

@Component({
    selector: "pm-products",
    templateUrl:"./product-list.component.html",
    styleUrls:["./product-list.component.css"]
})

export class ProductListComponent implements OnInit
{
pageTitle: string = "Product Listt";
imageWidth:number = 50;
imageMargin:number = 2;
showImage:boolean = false;
_listFilter:string = "";

constructor(private _productService : ProductService){


}

get listFilter():string{
    return this._listFilter;
};

set listFilter(value:string){
    this._listFilter = value;
    this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter):this.products;
};

filteredProducts: any[];

products: any[];

categories:any[]=[{
    "CategoryID":1
},
{
    "CategoryID":2
}
];

toggleImage():void
{
    var context = SP.ClientContext.get_current();
    var website = context.get_web();
    context.load(website);
    context.executeQueryAsync(function(){alert(website.get_title())},function(){alert("Failed");});

}

performFilter(value:string):any[]
{
    value = value.toLocaleLowerCase();

    return this.products.filter((product) => product.productName.toLocaleLowerCase().indexOf(value) != -1);
}

onRatingClicked(message:string):void{
    this.pageTitle = "Product List " + message;
}

ngOnInit()
{
   // alert("Init");
    console.log("on init");
    this.listFilter = "";
    this.products = this._productService.getProducts();
    this.filteredProducts = this.products;
    var tempResponse = this._productService.getCategories().subscribe(resp => this.categories = resp.value, 
        error => console.log(error));

}

}

解决方案

Hi,

For this case, I would suggest you developing SPFx so you could benefit from SharePoint online modern page.

Here are some links about SPFx with angular for your reference.

http://www.sebastienlevert.com/2017/07/31/sharepoint-framework-and-angular-introducing-the-spfx-angular-boilerplate/

http://www.sebastienlevert.com/2017/08/01/sharepoint-framework-and-angular-walkthrough-of-the-spfx-angular-boilerplate/

https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-angular/

You could go through below guideline about SPFx.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

If you do want to develop SharePoint add-in with angular4, you could follow below thread.

https://www.infopulse.com/blog/tutorial-visual-studio-2017-angular-4-sharepoint-online-add-in/

https://github.com/AlexanderShapoval/demo.sharepoint.angular4

 

Best Regards,

Lee

这篇关于JSOM中的角度4投掷错误找不到SP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！