Javascript 如何添加循环以填充此下拉列表？

我正在使用并添加了一个自定义字段，一个下拉列表，我想用我的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'
    });
  }
}

---

我们已经通过使用MongoDB作为服务准备CRUD样本来验证您报告的问题。在这种情况下，我们使用下拉组件作为附加（自定义）字段，自定义字段的数据源是从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'); 
      } 
    } 
  } 

ngOnInit（）：void{
this.selectedDate=新日期（2018年1月14日）；
this.eventSettings={dataSource:this.dataManager}；
const clientObservable=this.clientService.getClient（）；
clientObservable.subscribe（（客户端：client[]）=>{
this.dropDownDataSource=client；
}); 
} 
onPopupOpen（args:PopupOpenEventArgs）：void{
如果（args.type=='Editor'）{
//在初始时间创建所需的自定义元素
如果（！args.element.querySelector（'.custom field row'）{
let row:HTMLElement=createElement（'div'，{className:'自定义字段行'}）；
let-formElement:HTMLElement=args.element.querySelector（'.e-schedule-form'）；
formElement.firstChild.insertBefore（行，args.element.querySelector（'.e-title-location-row'）；
let容器：HTMLElement=createElement（'div'，{className:'customfieldcontainer'}）；
让inputEle:HTMLInputElement=createElement（'input'，{
类名：'e-field'，属性：{name:'EventType'}
})如HTMLInputElement；
container.appendChild（inputEle）；
行.appendChild（容器）；
让drowDownList:DropDownList=新的DropDownList（{
dataSource:this.dropDownDataSource，
字段：{text:'company'，value:'companyValue'}，
值：（args.data为{[key:string]：Object}）。EventType为string，
floatLabelType:“始终”，占位符：“事件类型”
}); 
drowDownList.appendTo（inputEle）；
inputEle.setAttribute（'name'，'EventType'）；
} 
} 
} 

样本：

请尝试上述示例，如果您有任何其他问题，请回复以获得进一步帮助

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'); 
      } 
    } 
  }