Angular 4 formArrayName für Dropdown-Liste

Question

I-Wert in folgenden Weise

Vorlage passieren kann:

<td formArrayName="itemnameS"> 
<div *ngFor="let itemname of itemnameS.controls; let i=index"> 
<input [formControlName]="i" placeholder="Item Name"> 
</div> 

component.ts:

form = new FormGroup({ 
    itemnameS: new FormArray([ 
     new FormControl('Gloves'), 
     new FormControl('Gauze'), 
     new FormControl('Needles'), 
    ]), 
    quantitieS: new FormArray([ 
     new FormControl(''), 
    ]), 
    }); 

Könnte mir bitte mitteilen, wie es ist möglich für die Dropdown-Liste wie folgt:

<select formArrayName="itemnameS"> 
<option *ngFor="let itemname of itemnameS.controls; let i=index" > 
       {{ ?? }} 
</option> 
</select> 

Sollte wie als Gebrüll aussehen:

Answer 1

Sie sollten nicht formArray erstellen:

form = new FormGroup({ 
    itemnameS: new FormArray([null]), // null to have at least one item initially 
    quantitieS: new FormArray([ 
     new FormControl(''), 
    ]), 
    }); 

this.myItems = ['Gloves','Gauze','Needles']; 

und dann:

<div *ngFor="let control of form.get('itemnameS').controls ; let i = index" > 
     <select formControlName="control"> 
      <option *ngFor="let itemname of myItems; let i=index [value]='itemname' > 
       {{ itemname }} 
    </option> 
</select> 
    <button (click)="addNewOne()">Add</button> 

     <button (click)="remove(i)">Remove</button> 
</div> 

Vergessen Sie nicht, ein select ist einfach ein Benutzereingaben und Benutzereingaben könnten nur einen Controller haben, also muss ein formControl ihm zugewiesen werden, weil es schließlich ist Ich werde einen Wert in Ihrer Datenbank gespeichert haben.

und dann, wenn Sie die add neues Element Funktionalität implementieren wollen:

addANewOne(){ 
    this.form.get('itemnameS').push(new FormControl()) 

    } 

und Entfernen

remove(index){ 
    this.form.get('itemnameS').removeAt(index) 

    }