ngModel always copies last item to all fields in table

Question

I have this array im trying to display in my template, somehow it will just not show correctly. if i do [value] it will give me the correct values but ofc. not bind to the array and values.

Array:

{"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}

Here is my tbody of my table, the PLU numbers are printing correctly, its only the other fields that are all set to the last item of my list.

<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

All you need to do is provide different name to all inputs

change name="plu" to name="plu{{i}}"

And check , you will get the idea about the issue , then make that change for all the inputs.