我需要使用angularJS在Sharepoint中创建一个Webpart。 我创建了包括文本框,切换按钮和下拉列表的属性窗格。 我陷入了必须像导航面板一样在Webpart上呈现下拉菜单的问题。 以下是主要功能的代码
HelloAngularWebpart.ts文件
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
export interface ISPOption {
Id: string;
Title: string;
}
export interface IHelloAngularWebPartProps {
description: string;
items: any[];
}
export default class HelloAngularWebPart extends BaseClientSideWebPart<IHelloAngularWebPartProps> {
public render(): void {
console.log('test', this._dropdownOptions);
platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' }).then(() => {
console.log('test2', this._dropdownOptions);
this.domElement.innerHTML = `<hello-world message="${this.properties.description}" items="${this._dropdownOptions}"></hello-world>`;
});
}
private _dropdownOptions: IPropertyPaneDropdownOption[] = [];
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.AddMenuName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.TitleFieldLabel
}),
PropertyPaneTextField('link', {
label: strings.LinkFieldLabel
}),
PropertyPaneToggle('submenu', {
label: "Does this Menubar has Parent",
onText: "Yes",
offText: "No"
}),
PropertyPaneDropdown('items', {
label: "Select Parent",
options: this._dropdownOptions
})
]
}
]
}
]
};
}
public onInit<T>(): Promise<T> {
this._dropdownOptions = [
{
key: 0,
text: "First"
},
{
key: 1,
text: "Second"
}
];
return Promise.resolve();
}
}
---------------------
helloWorld.component.ts:
import { Component, OnInit, Input } from "@angular/core";
import { IPropertyPaneDropdownOption } from '@microsoft/sp-webpart-base';
@Component({
selector: 'hello-world',
template: `
<div>{{ message }} {{ items[0].text }}</div>
<div id="navigation" class="">
<div class="">
<ul>
<li *ngFor="let item of items"> //not able to fetch items here
{{ item.text }} //nothing rendering
</li>
</ul>
</div>
</div>
`
})
export class HelloWorldComponent implements OnInit {
@Input()
public message: string;
public items: IPropertyPaneDropdownOption[] = [];
public ngOnInit() {
}
}```
I need to get items list in this block so that dropdown is rendered