angular - ngModel 总是将最后一项复制到表中的所有字段

Question

我有这个数组试图在我的模板中显示，不知何故它无法正确显示。如果我这样做 [value]，它将给我正确的值，但 ofc。不绑定(bind)到数组和值。

大批:

{"pluNo":1,"pluName":"Smirnoff 2cl","pluDepartment":"VODKA","pluPrice":2000},
{"pluNo":2,"pluName":"Smirnoff 4cl lala","pluDepartment":"VODKA","pluPrice":4000},
{"pluNo":3,"pluName":"Jack D 2cl","pluDepartment":"Whiskey","pluPrice":2200},
{"pluNo":4,"pluName":"Smirnoff 4cl","pluDepartment":"VODKA","pluPrice":4000},
{"pluNo":5,"pluName":"Rom","pluDepartment":"Rom","pluPrice":2500},
{"pluNo":6,"pluName":"Rom 4cl","pluDepartment":"Rom","pluPrice":5000}

这是我的表格，PLU 编号打印正确，只有其他字段都设置为我列表的最后一项。

<tbody>
    <tr *ngFor="let item of products; let i = index">
        <td scope="row">
            {{item.pluNo}}                                                                          
        </td>
        <td>
            <input type="text" [(ngModel)]="item.pluName" name="plu" class="form-control m-input" placeholder="" value="">                                                                  
        </td>
        <td>
            <input type="text" [(ngModel)]="item.pluDepartment" name="pluDepartment" class="form-control m-input" placeholder="" value="">                                                          
        </td>
        <td>
            <input type="number" [(ngModel)]="item.pluPrice" name="pluPrice" class="form-control m-input" placeholder="">                                                                   
        </td>   
        <td>
            <button (click)="deletePluItem(item)">Delete</button>
        </td>
    </tr>
</tbody>

Answer 1

您需要做的就是提供不同的name致所有 inputs

更改 name="plu"至name="plu{{i}}"
并检查，您将了解该问题，然后对所有输入进行更改。