我如何在Angular中动态填充下拉列表（Syncfusion Scheduler）

Question

我在Angular 8应用程序中使用Syncfusion Scheduler，我正在自定义弹出的视图以创建新事件。它带有onPopupOpen()功能，您可以在其中添加新元素。我想添加一个下拉列表，其中显示了当前用户的所有客户端（companyName属性）。我将Mongo集合中的数据加载到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响应，并显示特定登录用户拥有的所有客户端。而不是响应的静态第[0]位置。香港专业教育学院尝试了for循环/ forEach，但没有奏效。在这种情况下，我应该在哪里放置循环？

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

我认为您正在寻找数组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
   }));
 });
}
....