javascript - Angular4 动态表重置先前创建的行上的值

Question

我正在创建一个动态表，它在 click() 上添加一行。但是，每次添加该行都会重置前一行的值。

<tfoot>
   <tr>
       <td><button type="button" (click)="addRow()">Add row </td>
   </tr>
</tfoot>

//html

<tbody>
    <tr *ngFor="let row of rows">
        <td><input name="something" type="text" [ngModel]="row.item.name </td>
    </tr>
</tbody>

//组件

...
this.item = {name: 'Superman'};

this.rows = [{
    item: this.item
}];

....
this.addRow() {
    this.rows.push({
        item: this.item
    });
}

Answer 1

[已解决]我们只需使输入的名称唯一即可!

<tfoot>
   <tr>
       <td><button type="button" (click)="addRow()">Add row </td>
   </tr>
</tfoot>

// html
<tbody>
    <tr *ngFor="let row of rows; let i = index">
        <td><input name="something_{{i}}" type="text" [ngModel]="row.item.name </td>
    </tr>
</tbody>

// component
...
this.item = {name: 'Superman'};

this.rows = [{
    item: this.item
}];

....
this.addRow() {
    this.rows.push({
        item: this.item
    });
}