Question

目标：自定义下拉列表应接受任何数据作为项目来源绑定到它。基于对象属性，我试图设置*ngFor值如果itemsource是一个字符串数组，我可以说*ngFor="let item in itemSource"。现在，如果itemSource是一个具有属性而没有更改*ngFor=let item in itemSource的对象，我该如何实现它？我可以在组件代码中更改let item in itemSource中的项目值吗？

 <select class="form-control" name="test1" [(ngModel)]="model" (change)="onModelChange($event.target.value)">
                  <option value="">Select state</option>
                  <option *ngFor="let item of itemSource"
                  [ngValue]="item.id" >{{item}}</option>
              </select>

这是插件：https://plnkr.co/edit/xFvvJ559idGxQMhDD6Ya?p=preview

Answer 1

在您的组件中，我假设您有一个@input（）属性，您显示在下拉列表中吗？从这个假设出发，让我们看一下这个例子：

@Input() initialItemSource;
itemSource;

ngOnInit(){
   if(this.initialItemSource){
      if(typeof this.initialItemSource === 'object' && typeof this.initialItemSource.length === "number"){
         let obj:any = {};
         this.initialItemSource.forEach((el,index) =>{
             obj[index] = el;            
         });
         this.itemSource = obj; //Now itemSource is an object;
      }else if(typeof this.initialItemSource === 'object'){
           this.itemSource =  this.initialItemSource;
      }
   }
}

现在您需要从模板中使用itemSource

<select class="form-control" *ngIf="itemSource" name="test1" 
        [(ngModel)]="model" (change)="onModelChange($event.target.value)">
       <option value="">Select state</option>
       <option *ngFor="let item of itemSource" 
        [ngValue]="item" >itemSource[item]</option>
</select>

请注意，我删除了item.id并将其替换为itemSource [item]，因为属性ID并不总是存在。

基本上，您的自定义组件需要一个属性才能使用。如果它是一个对象，它将显示其属性值为id的属性值。如果它是一个数组，它将它转换为一个对象并列出索引为ids的值（ngValue）

Angular（5）：自定义下拉组件

1 个答案: