Создайте раскрывающийся список в веб-части sharepoint, используя угловой - PullRequest
0 голосов
/ 04 июня 2019

Мне нужно создать веб-часть в 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...