如何基于数组循环输入字段

Question

我有一个如下所示的数组

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

当我在我的视图中循环播放它时

<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 属性。因此，要获得唯一的名称属性，我们可以将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>