如何迴路輸入字段基於陣列

Question

我有一個像陣列下面

standardInput:any = [{val:'1'},{val:'2'},{val:'3'}]; 

當i循環在我的視圖

<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}} 
    <label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label> 
     <div class="col-sm-9 form-control-label m-t-5" for="password-h-f"> 
      <div class="row"> 
       <div class="col-sm-9" > 
        <input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email"> 
       </div> 
       <div class="col-sm-3"> 
       <button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button> 
       </div> 
      </div> 
      </div> 
     </div> 

的輸出是：3 3 3，它僅示出了數組中的最後一個對象進行了3次迭代。我無法理解是什麼原因。可以請任何人提供幫助。謝謝。

Answer 1

我相信你使用模板驅動的形式，如果沒有，讓我知道，大家可以看一下模型驅動形式:)

在表格中，name屬性必須是唯一的解決方案。儘管ngModel是獨一無二的，但Angular並不關心它，而是查看name屬性。由於您使用的是模板驅動的表單，並且ngModel，因此我不需要在此處使用formControl，您可以僅依賴於ngModel和name屬性。因此，要獲得唯一的name屬性，我們可以綁定row.val它，像這樣：

[name]="row.val" 

所以，你的整個模板是這樣的：

<form #form="ngForm"> 
    <div class="form-group row text-right" *ngFor='let row of standardInput'> 
    <input class="form-control" [name]="row.val" [(ngModel)]="row.val"> 
    </div> 
</form>