Dynamic ngModel в угловой 2

Question

Я пытаюсь создать динамический ngModel внутри ngFor, у меня есть массив объектов телефонных номеров, которые мне нужно связать с элементом формы & пользователя может обновлять, что детали, ниже мой код:

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> 

Так вот [(ngModel)]="phone.label" не является обязательным образом, значения не получают обновленный в объекте

Answer 1

использования NgValue директивы вместо значения, когда вы работаете с выбором и NgModel директивой, и вы должны также добавить в свой [ngModelOptions]="{ standalone : true }" для предотвращения их добавляется к тому же FormGroup экземпляр, если вы используете формы:

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