Fatal编程技术网
  • javascript/
  • Javascript 如何在Angular（Syncfusion调度程序）中动态填充下拉列表

Javascript 如何在Angular（Syncfusion调度程序）中动态填充下拉列表

javascript angular loops

Javascript 如何在Angular（Syncfusion调度程序）中动态填充下拉列表,javascript,angular,loops,scheduler,syncfusion,Javascript,Angular,Loops,Scheduler,Syncfusion,我正在Angular 8应用程序中使用，我正在自定义弹出的视图以创建新事件。它附带了onPopupOpen（）函数，您可以在其中添加新元素。 我想添加一个下拉列表，其中显示当前用户的所有客户端（companyName属性）。我将Mongo集合中的数据加载到ngOnInit（）： 在这里，我将下拉元素插入onPopupOpen（）函数： let dropDownList: DropDownList = new DropDownList({ dataSource: [

我正在Angular 8应用程序中使用，我正在自定义弹出的视图以创建新事件。它附带了
onPopupOpen（）
函数，您可以在其中添加新元素。 我想添加一个下拉列表，其中显示当前用户的所有客户端（
companyName
属性）。我将Mongo集合中的数据加载到
ngOnInit（）
：

在这里，我将下拉元素插入
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'
        });
我想您正在寻找数组
map
属性

尝试：

编辑：我会看到你的完整HTML和打字脚本，给你一个最佳的解决方案

=========================================================== 查看他们的文档后（顺便说一句，他们没有最好的文档）。

（查看通过AJAX post加载数据）

@组件({
选择器：“应用程序议程”，
//templateUrl:“./agenda.component.html”，
样式URL:['./agenda.component.css']，
提供者：[日服务、周服务、工作周服务、月服务、，
代理服务、Monthagendase服务、TimeLineViews服务、，
TimelineMonthService]，
模板：``
})
....
@ViewChild（'scheduleObj'，{static:true}）
公共scheduleObj：ScheduleComponent；
....
onCreate（）{
const scheduleObj=this.scheduleObj；
this.clientService.getClients（）.subscribe（（数据：any）=>{
scheduleObj.eventSettings.dataSource=data.map（（点，索引）=>({
id:索引，
主题：point.companyName，
StartTime:new Date（），//应来自您的API，
EndTime:new Date（），//应该来自您的API
}));
});
}
....
我们已经通过使用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'）；
} 
} 
}
样本：

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

我尝试了这个，它给了我一个空的下拉列表，只是一个灰色的字段：\n这可能是因为客户端不是数组吗？这是一个可观察到的问题，但您在
ngOnInit
中填充了它，但您担心它们将同时运行，并且
这是一个问题。客户端
将
未定义
或
[]
？如果是这种情况，我将为您提供一个新的解决方案。我运行console.log（this.clients），它确实给了我未定义的内容。我替换了console.log（this.clients），现在它可以工作了，在控制台中，我得到一个包含所有客户端的对象：）

@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>`
})



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})),
....



@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
   }));
 });
}
....



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