Angular4 dynamic table reset values on previous created row

Question

I am creating a dynamic table which adds a row on click(). However, every add of the row resets the value of the previous row.

<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>

// component

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

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

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

jsdecena · Accepted Answer · 2017-12-12 12:36:51Z

1

[SOLVED] We just need to make the name of the input unique!

<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
    });
}

answered Dec 12, 2017 at 12:36

jsdecena

5732 gold badges7 silver badges22 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2017-12-12 11:40:34Z

0

Because you're pushing same object reference in an array multiple times. So if you change this.item will effectively change the value in all newly added array element(since they carry the same object reference).

The solution would be, push clone object to an items array.

this.rows.push({
    item: Object.assign({}, this.item); //created clone
});

edited Dec 12, 2017 at 11:40

answered Dec 12, 2017 at 11:34

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Angular4 dynamic table reset values on previous created row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related