Angular 绑定数组对象的数组

在我的组件中，我有一个行数组，其中动态填充了来自后端的数据

this.rows = []; // somehow put data inside

每个元素中都有另一个元素，它也是一个列数组，也是由后端生成的

const row = {
      ColorId: 0,
      SizeId: 0,
      Quantity: 0,
      Fields: this.Product.Personalizations.map(p => {
        return {
          Value: '',
          ID: p.ID,
          Required: p.Required,
          Price: p.Price,
          Description: p.Description,
          Name: p.Name
        }
      })
    };

    this.rows.push(row);

我试图将每个

字段

绑定到这样的输入

<div class="bulk-order-row"
                 [ngClass]="{'active-bulk-row': editingOnMobile}"
                 *ngFor="let row of rows; let i = index;">
...
                <div class="col-personalization" *ngFor="let field of row.Fields">
                  <div class="form-group">
                    <label class="hidden-md-up">{{field.Name}}</label>
                    <input type="text" class="form-control-alt" [required]="field.Required"
                      [(ngModel)]="field.Value" name="{{field.Name}}" id="{{field.ID}}">
                  </div>
                </div>

...
{{field.Name}

---

似乎字段绑定正确，但每次我添加新行时，所有输入字段都变为空白？如果我检查

此.rows中的实际值，我会看到它们在那里。为什么
输入变为空白？
问题是由于一行中的所有输入都具有相同的名称。
将索引（
idx
）添加到名称中可以解决以下问题：

  <tr *ngFor='let r of rows let idx=index'>
    <td>
      <input type='text' [(ngModel)]="r.quantity" name='quantity'>
    </td>
    <td *ngFor='let p of r.props'>
      <input type='text' [(ngModel)]='p.value' name='{{p.name}}{{idx}}' [id]='p.id'
        >
    </td>
  </tr>



可能与重新评估的
此.Product.Personalizations.map（p=>{
有关。Plunk将有助于调查。以下是最小的Plunk：依我看，问题是由[required]造成的。单击[AddRow]填充一些值，然后再次单击[Add row]，字段值将消失。