Как динамически заполнить раскрывающийся список в Angular (Syncfusion Scheduler)

Question

Я использую Syncfusion Scheduler в своем приложении Angular 8, и я настраиваю всплывающее представление для создания нового события. Он поставляется с функцией onPopupOpen(), где вы можете добавлять новые элементы. Я хочу добавить выпадающий список, в котором отображаются все клиенты текущего пользователя (свойство companyName). Я загружаю данные из коллекции Mon go в ngOnInit():

  ngOnInit() {   

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

  }

. Здесь я вставляю выпадающий элемент в функцию onPopupOpen():

  let dropDownList: DropDownList = new DropDownList({
        dataSource: [
        {text: this.clients[0].companyName, value: this.clients[0].companyName}

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

Как добавить эту строку источника данных ({text: this.clients[0].companyName, value: this.clients[0].companyName}) соответственно? Таким образом, он просматривает ответ clients и показывает всех клиентов, которые есть у конкретного вошедшего в систему пользователя. Вместо состояния c [0] -ая позиция ответа. Я попробовал для l oop / forEach, но это не сработало. Где я должен поставить l oop в этом сценарии?

Здесь вызывается функция onPopupOpen():

@Component({
  selector: 'app-agenda',
 // templateUrl: './agenda.component.html',
  styleUrls: ['./agenda.component.css'],
  providers: [DayService, WeekService, WorkWeekService, MonthService, 
AgendaService, MonthAgendaService, TimelineViewsService, 
TimelineMonthService],
  template: `<ejs-schedule width='100%' height='750px' locale='nl-AW' 
[eventSettings]="eventSettings"  (actionBegin)="onActionBegin($event)" 
[views]='views' (popupOpen)='onPopupOpen($event)'>  </ejs-schedule>`
})

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/269087/ze/sample1530536267

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

Answer 2

Я думаю, вы ищете свойство массива map.

Попробуйте:

ngOnInit() {   

  this.clientService.getClients().subscribe((data : any) => {
    this.clients = data.client;
    // once this.clients is populated, call `this.onPopupOpen();` to populate
    this.onPopupOpen();
  });

}
...

// take the clients array and create a new array of objects with text and value properties equal to the companyName of each element
dataSource: this.clients.map(client => ({text: client.companyName, value: client.companyName})),
....

Редактировать: мне нужно будет увидеть ваш полный HTML и TypeScript, чтобы дать вам оптимальное решение.

============================================ ==================== После просмотра их документации (кстати, у них нет лучшей документации).

https://ej2.syncfusion.com/angular/documentation/schedule/data-binding/#binding -remote-data (проверить загрузку данных через AJAX сообщение)

@Component({
  selector: 'app-agenda',
 // templateUrl: './agenda.component.html',
  styleUrls: ['./agenda.component.css'],
  providers: [DayService, WeekService, WorkWeekService, MonthService, 
AgendaService, MonthAgendaService, TimelineViewsService, 
TimelineMonthService],
  template: `<ejs-schedule width='100%' height='750px' locale='nl-AW' 
[eventSettings]="eventSettings"  (actionBegin)="onActionBegin($event)" 
[views]='views' (popupOpen)='onPopupOpen($event)' (created)="onCreate()">  </ejs-schedule>`
})

....
@ViewChild('scheduleObj', { static: true })
    public scheduleObj: ScheduleComponent;
....
onCreate() {
 const scheduleObj = this.scheduleObj;
 this.clientService.getClients().subscribe((data : any) => {
  scheduleObj.eventSettings.dataSource = data.map((point, index) => ({
     id: index,
     Subject: point.companyName,
     StartTime: new Date(), // should come from your API,
     EndTime: new Date(), // should come from your API
   }));
 });
}
....