为什么行没有更新我的表单输入的角度7？

Question

我有一个angular应用程序，在其中我有一个表，在页面组件加载的最初，我将有一个表单行。然后当用户将在'description'字段中键入任何内容时，将添加另一行。

下面是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>

null

所以看起来是这样的

这个过程是，当加载模态时，最初文本将代替输入，当用户单击任何列时，它将成为可编辑的输入。问题是，当用户将在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)]？

这里有stackblitz供参考

Answer 1

Ahsan，您需要添加一个singleRow的“副本”，而不是singleRow，否则您就有一个唯一的行

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