Как добавить al oop для заполнения этого выпадающего списка?

Question

Я использую Syncfusion Angular Планировщик , и я добавил настраиваемое поле, раскрывающийся список, и я хочу заполнить его динамическими c данными из моего MongoDB. Это мой код:

onPopupOpen(args: PopupOpenEventArgs): void {

if (args.type === 'Editor') {

  if (!args.element.querySelector('.custom-field-row')) {
   ....

   let dropDownList: DropDownList = new DropDownList({

        dataSource: [              

          {text: this.clients[0].company, value: this.clients[0].company},
          {text: this.clients[1].company, value: this.clients[1].company},

      ],
      fields: {text: 'text', value: 'value'},
      value: (<{ [key: string]: Object }>(args.data)).Client as string,
      floatLabelType: 'Always', placeholder: 'Client'
    });
  }
}

Однако я хочу добавить их динамически, не указывая 0-й индекс или 1, потому что я не знаю, сколько клиентов будет у пользователя. Поэтому я хочу отобразить свойство company каждого клиента (объекта). когда я добавляю для l oop или ForEach в dataSource, это дает ошибки повсюду. Кроме того, this.clients.map(client => ({text: client.company, value: client.company})), дает мне пустой выпадающий список. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

ngOnInit() {
  this.clientService.getClients().subscribe((data : any) => {
  this.clients= data.client;
});
}

Answer 1

Мы проверили вашу сообщенную проблему на нашей стороне, подготовив образец CRUD с MongoDB в качестве службы. При этом мы используем Dropdown Component в качестве дополнительного (настраиваемого) поля, а источник данных для настраиваемого поля назначается из Observable Data Services, и его можно скачать по следующей ссылке.

Фрагмент кода:

ngOnInit(): void { 
    this.selectedDate = new Date(2018, 1, 14); 
    this.eventSettings = { dataSource: this.dataManager }; 
    const clientObservable = this.clientService.getClient(); 
    clientObservable.subscribe((client: client[]) => { 
      this.dropDownDataSource = client; 
    }); 
  } 
  onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type === 'Editor') { 
      // Create required custom elements in initial time 
      if (!args.element.querySelector('.custom-field-row')) { 
        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 
        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 
        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 
        let inputEle: HTMLInputElement = createElement('input', { 
          className: 'e-field', attrs: { name: 'EventType' } 
        }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: this.dropDownDataSource, 
          fields: { text: 'company', value: 'companyValue' }, 
          value: (args.data as { [key: string]: Object }).EventType as string, 
          floatLabelType: 'Always', placeholder: 'Event Type' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'EventType'); 
      } 
    } 
  } 

Образец: https://www.syncfusion.com/downloads/support/directtrac/269086/ze/sample-525591979

Пожалуйста, попробуйте приведенный выше пример, и если у вас есть какие-либо другие проблемы, пожалуйста, вернитесь для дальнейшая помощь.