Мне нужно создать веб-часть в Sharepoint с помощью angularJS.
Я создал панель свойств, которая включает в себя текстовое поле, кнопку переключения и раскрывающийся список.
Я застрял в точке, где выпадающий список должен отображаться на веб-части, как панель навигации.
Ниже приведен код для основных функций
файл 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