使用angular在sharepoint Webpart中创建下拉菜单

时间:2019-06-04 14:07:21

标签: angular sharepoint

我需要使用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

0 个答案:

没有答案
相关问题