Angular Edit all values on a table

Question

I have an array that I'm showing on a table, but I need to edit all the values in one column of that table. My code is like this:

<tr *ngFor="let line of invoice.lines; let index = index">
    <td>
        {{line.quantity}}
    </td>
    <td style="width: 35%">
        {{line.productName}}
    </td>
    <td>
        <input type="number" class="form-control" name="order_price"
        id="field_order_price" [(ngModel)]="line.price"/>
    </td>
...
</tr>

The thing is that the input has the same value in all the rows (which is the last one in the array). I tried printing the value of line.price next to the input to be sure that the I'm getting the right values and this is what I get:

What am I missing?

UPDATE 1: changed by suggstions hasn't worked :(

<input type="number" class="form-control" name="order_price" (click)="onOrderPriceChange(index)" id="field_order_price1_{{index}}" [(ngModel)]="invoice.lines[index].price"/>

Angular:

trackByIndex(index: number, line: IInvoiceLine): any {
    return line.id;
  }

Seems to be common to experience issues with `[(ngModel)]` within an `*ngFor` directive. I've not come across this yet myself, but maybe take a look at this: https://stackoverflow.com/a/40315703/12431728 — Matt U, Nov 30 '19 at 06:17

Ayyub Kolsawala · Accepted Answer · 2019-11-30T07:09:06.300

3

Each input should have a unique ID attribute. Let me know if you have some queries.

<tr *ngFor="let line of invoice.lines; let index = index">
  <td>
    {{line.quantity}}
  </td>
  <td style="width: 35%">
    {{line.productName}}
  </td>
  <td>
    <input type="number" class="form-control" name="{{'order_price_' + index}}" id="{{'field_order_price_' + index}}" [(ngModel)]="invoice.lines[index].price" />
  </td>
</tr>

Hope this helps :)

edited Nov 30 '19 at 07:09

answered Nov 30 '19 at 06:23

Ayyub Kolsawala

809
8
15

_almost_ there, I still see the '12' as value, but while inspecting I can see the correct value as 'ng-reflect-model="16.95"' why could that be? – Alejandro Nov 30 '19 at 06:33
just wanting to know have you updated the `Id` & `[(ngModel)]` as shown in the code? apparently having same ids for multiple attributes might lead to this – Ayyub Kolsawala Nov 30 '19 at 06:36
2

@Alejandro I have updated the answer, turns out `name` needs to be unique as well. Give it a shot – Ayyub Kolsawala Nov 30 '19 at 07:10
thank you. That did it, both id and name must be unique – Alejandro Nov 30 '19 at 07:26
@Ayyub, it's not necesary an unique "id", really it's not necesary use "id". The key is, obviously, give different variable to [(ngModel)] – Eliseo Nov 30 '19 at 09:54
actually no, the variable for ngModel is the same as we are talking about an array so the field's name remains unchanged – Alejandro Dec 02 '19 at 17:36

score 2 · Answer 2 · answered Nov 30 '19 at 08:17

2

You need to give a UNIQUE ID for each input. You can also use the below code to resolve your concern.

<tr *ngFor="let line of invoice.lines; let index = index">
  <td>
      {{line.quantity}}
  </td>
  <td style="width: 35%">
      {{line.productName}}
  </td>
  <td>
      <input type="number" class="form-control" [id]="'field_order_price' + index" [(ngModel)]="line[index]" />
  </td>
</tr>

Hope this helps! Thank you.

answered Nov 30 '19 at 08:17

Aman Gojariya

1,289
1
9
21

Idem comentary about "id" that before answers – Eliseo Nov 30 '19 at 09:55
noup, your comment doesn't apply to this answer. This answer is also correct. – Alejandro Dec 02 '19 at 17:37

Angular Edit all values on a table

2 Answers2