Angular (5): Benutzerdefinierte Dropdown-Komponente

Question

Ziel: Die benutzerdefinierte Dropdownliste sollte alle Daten als Elementquelle akzeptieren, die an sie gebunden werden. Basierend auf den Objekteigenschaften versuche ich den *ngFor Wert zum Beispiel zu setzen, wenn die Itemsource ein Array von Strings ist, kann ich einfach *ngFor="let item in itemSource" sagen. Wenn die itemSource ein Objekt mit Eigenschaften ist, ohne die *ngFor=let item in itemSource zu ändern, wie kann ich das erreichen? Kann ich den Artikelwert in let item in itemSource im Komponentencode ändern?

<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> 

Hier ist die zupfen: https://plnkr.co/edit/xFvvJ559idGxQMhDD6Ya?p=preview

Answer 1

In Ihrer Komponente, ich nehme an, Sie eine @input haben() Eigenschaft, die Sie in Ihrer Dropdown-Liste rechts angezeigt werden? Von dieser Annahme, lassen Sie uns in diesem Beispiel aussehen:

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

jetzt müssen Sie Ihre ItemSource vom

<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> 

Hinweis

Vorlage verbrauchen, die ich item.id entfernt und ersetzt es mit ItemSource [Artikel] da die Eigenschaften-ID nicht immer existiert.

Grundsätzlich benötigt Ihre benutzerdefinierte Komponente eine Eigenschaft, mit der Sie arbeiten können. Wenn es ein Objekt ist, zeigt es die Werte seiner Eigenschaften an, wobei die Eigenschaften die IDs sind. Wenn es sich um ein Array handelt, konvertiert es es in ein Objekt und listet die Werte auf, bei denen die Indizes die IDs (ngValue)

sind