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: stackoverflow.com/a/40315703/12431728 — Matt U
– Matt U, Commented Nov 30, 2019 at 6:17

Ayyub Kolsawala · Accepted Answer · 2019-11-30 07:09:06Z

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, 2019 at 7:09

answered Nov 30, 2019 at 6:23

Ayyub Kolsawala

8598 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alejandro Over a year ago

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?

Ayyub Kolsawala Over a year ago

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 Over a year ago

@Alejandro I have updated the answer, turns out name needs to be unique as well. Give it a shot

Alejandro Over a year ago

thank you. That did it, both id and name must be unique

Eliseo Over a year ago

@Ayyub, it's not necesary an unique "id", really it's not necesary use "id". The key is, obviously, give different variable to [(ngModel)]

|

Aman Gojariya · Accepted Answer · 2019-11-30 08:17:14Z

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, 2019 at 8:17

Aman Gojariya

1,5031 gold badge12 silver badges24 bronze badges

2 Comments

Eliseo Over a year ago

Idem comentary about "id" that before answers

Alejandro Over a year ago

noup, your comment doesn't apply to this answer. This answer is also correct.

Collectives™ on Stack Overflow

Angular Edit all values on a table

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related