我无法在angular材质表上更新一行,当我改变一个单元格(对象表中的一个字段)的值时,字段的值实际上是改变了,但在浏览器上并没有直接显示出来,如何让一行的更新在执行按钮动作时,在浏览器上动态地看到呢?
这是我的代码
查看。
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 widget-body">
<!-- Position Column -->
<ng-container matColumnDef="ref">
<th mat-header-cell *matHeaderCellDef> Ref. </th>
<td mat-cell *matCellDef="let element"> {{element.ref}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="art">
<th mat-header-cell *matHeaderCellDef> Nom Article </th>
<td mat-cell *matCellDef="let element"> {{element.art}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="quantity">
<th mat-header-cell *matHeaderCellDef> Quantite </th>
<td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="red">
<th mat-header-cell *matHeaderCellDef> Reduction </th>
<td mat-cell *matCellDef="let element"> {{element.red}} </td>
</ng-container>
<ng-container matColumnDef="prixht">
<th mat-header-cell *matHeaderCellDef> Prix Hors Taxe </th>
<td mat-cell *matCellDef="let element"> {{element.prixht}} </td>
</ng-container>
<ng-container matColumnDef="tva">
<th mat-header-cell *matHeaderCellDef> TVA </th>
<td mat-cell *matCellDef="let element"> {{element.tva}} </td>
</ng-container>
<ng-container matColumnDef="prixtt">
<th mat-header-cell *matHeaderCellDef> Prix Total </th>
<td mat-cell *matCellDef="let element"> {{element.prixtt}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef width="106px" class="kt-pl-13">
Actions
</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button color="primary" (click)="Update(element)" type="button" ><mat-icon>create</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
组件。
export class TableauComponent implements OnInit {
displayedColumns: string[] = ['ref', 'art', 'quantity', 'red','prixht','tva','prixtt','actions'];
dataSource = new MatTableDataSource<Data>();
qte=18;
constructor() {}
ngOnInit() {}
Update(obj){
for(var i=0;i<this.dataSource.data.length;i++){
if(this.dataSource.data[i].ref==obj.ref){
console.log(this.dataSource.data[i]);
this.dataSource.data[i].quantity=qte;
break;
}
}
this.dataSource._updateChangeSubscription();
}
}
```
我终于找到了答案。使用ChangeDetectorRef使用markForCheck()或 detectChanges()
import { ...., ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
@Component({
........
styleUrls: ['./tableau.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
.....
constructor(.... private cd:ChangeDetectorRef) { }
....
onUpdateRow(obj,qte){
.....
this.dataSource._updateChangeSubscription();
this.cd.markForCheck(); //or cd.detectChanges();
}