이전에 생성 된 행의 Angular4 동적 테이블 재설정 값

Question

click()에서 행을 추가하는 동적 테이블을 만듭니다. 그러나 행을 추가 할 때마다 이전 행의 값이 재설정됩니다.

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

// 구성 요소

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

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

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

Answer 1

[SOLVED] 입력의 이름을 고유하게 만들면됩니다.

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

Answer 2

당신이 배열을 여러 번 동일 객체 참조를 추진하고 있기 때문에. 따라서 this.item을 변경하면 새로 추가 된 모든 배열 요소의 값이 효과적으로 변경됩니다 (동일한 객체 참조가 전달되므로).

해결 방법은 객체를 항목 배열로 푸시하는 것입니다.

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