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>

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

1 个答案: