почему строка не обновляет в моей форме входные данные в angular7?

Question

У меня есть приложение angular, в котором у меня есть таблица, в которой у меня будет одна строка формы изначально при загрузке компонента страницы. Затем, когда пользователь введет что-либо в поле «описание», будет добавлена ​​еще одна строка.

Вот код component.html

<tr *ngFor="let fullRow of rawCannedService; let rowIndex = index;">
<td scope="row" (click)="onTypeClick()">
    <span *ngIf="isTypeLabel">Labor</span>
    <select *ngIf="!isTypeLabel" class="form-control" (blur)="onTypeBlur()" [(ngModel)]="serviceRow['type']">
        <option value="part">Part</option>
        <option value="labour">Labour</option>
    </select>
</td>
<td *ngFor="let service of fullRow.row;let i=index" (click)="onCoumnClick(i)">
    <span *ngIf="service.labelVisible">{{service.label}}</span>
    <input type="text" *ngIf="!service.labelVisible" (blur)="onColumnBlur(i,service.name)" class="form-control" [(ngModel)]="rawCannedService[rowIndex].row[i]['variableRef']">
    <!-- <app-table-cell *ngIf="!service.labelVisible" [serviceObj]="service" [colIndex]="i" [rowIndex]="rowIndex" [columnState]="onColumnBlur($event)"></app-table-cell> -->
</td>

Так это выглядит

Процесс заключается в том, что, когда модальный режим загружается, текст вместо него будет находиться вместо входных данных, а когда пользователь нажимает на любой столбец, он становится редактируемым. Проблема в том, что мне нужно добавить следующую строку, когда пользователь введет что-либо в поле description. Таким образом, в настоящее время строка добавляется, но переменные не обновляются. Он также связывает те же значения для следующей строки. Я связываю ngModel переменные динамически. Вот результат после добавления еще одной строки

Вот мой код component.ts.

 columns = [
  { field: 'type', header: 'Type', width: '15%' },
  { field: 'desc', header: 'Description', width: '40%' },
  { field: 'price', header: 'Price', width: '15%' },
  { field: 'qty', header: 'Qty', width: '10%' },
  { field: 'hrs', header: 'HRS', width: '10%' },
  { field: 'subtotal', header: 'SUBTOTAL', width: '10%' }
 ];
singleRow = [
  { name: 'desc', label: 'Please enter description', labelVisible: true, variableRef : ''},
  { name: 'price', label: '$0.00', labelVisible: true , variableRef : ''},
  { name: 'qty', label: '0', labelVisible: true, variableRef : '' },
  { name: 'hrs', label: '0', labelVisible: true, variableRef : '' },
  { name: 'total', label: '$0.00', labelVisible: true, variableRef : '' }
 ];
 rawCannedService = [];

  onCoumnClick(index: number) {
   this.rawCannedService[this.selectedRowIndex].row[index].labelVisible = false;
  }
 onColumnBlur(index: number, field: string) {
   console.log('field : ', field);
   console.log('row : ', index);
   console.log('updated state : ', this.rawCannedService);
   this.rawCannedService[this.selectedRowIndex].row[index][field] = this.serviceRow[field];
   if (field === 'desc' && this.rawCannedService[this.selectedRowIndex].row[index]['variableRef'].length > 2) {
   this.selectedRowIndex++;
   this.rawCannedService.push({row : this.singleRow});
  }
}

Я связываю [(ngModel)] не так?

Здесь стэкблитц здесь для справки

Answer 1

Асан, вам нужно добавить «копию» singleRow, а не singleRow, иначе у вас есть уникальная строка

push({row : this.singleRow.map(x=>({...x}))})