Dynamische ngModel in Winkel 2

Question

I dynamische ngModel innerhalb ngFor zu schaffen versuche ich ein Objekt-Array der Telefonnummern, die ich mit dem Formelement & Benutzer zu binden, müssen die Daten aktualisieren können, ist unter meinen Code:

phoneNumber = [{ 
    'type': 'mobile', 
    'number': '1234567', 
    'label': 'Personal' 
}, { 
    'type': 'landline', 
    'number': '64332222', 
    'label': 'Work' 
}]; 

<div class="form-field-block" *ngFor="let phone of phoneNumber; let i = index "> 
    <div class="form-group> 
     <select name="phoneLabel" class="custom-select form-control-sm" [(ngModel)]="phone.label"> 
      <option value="Personal">Personal</option> 
      <option value="Home">Home</option> 
      <option value="Work">Work</option> 
     </select> 
     <select name="phoneFor" class="custom-select form-control-sm" [(ngModel)]="phone.type"> 
      <option value="mobile">Mobile</option> 
      <option value="landline">Landline</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" name="number" placeholder="Phone Number" [(ngModel)]="phone.number"> 
    </div> 
</div> 

Also hier [(ngModel)]="phone.label" ist nicht bindend richtig, Werte sind nicht im Objekt

Answer 1

Verwendung NgValue Direktive statt Wert aktualisiert wird, wenn Sie mit ausgewählter und NgModel Richtlinie arbeiten, und Sie sollen auch [ngModelOptions]="{ standalone : true }" hinzufügen Ihre Eingänge, um sie zu verhindern hinzugefügt zu derselben FormGroup Instanz, wenn Sie Formulare verwenden:

<select name="phoneLabel" class="custom-select form-control-sm" [(ngModel)]="phone.label" [ngModelOptions]="{ standalone : true }"> 
    <option [ngValue]="'Personal'">Personal</option> 
    <option [ngValue]="'Home'">Home</option> 
    <option [ngValue]="'Work'">Work</option> 
</select> 
<select name="phoneFor" class="custom-select form-control-sm" [(ngModel)]="phone.type" [ngModelOptions]="{ standalone : true }"> 
    <option [ngValue]="'mobile'">Mobile</option> 
    <option [ngValue]="'landline'">Landline</option> 
</select> 
<input type="text" class="form-control" name="number" placeholder="Phone Number" [(ngModel)]="phone.number" [ngModelOptions]="{ standalone : true }">