我不知道如何在我的 Angular 应用程序中使用 Change-Detection。我的方法的目标是，仅当我的表列表中的数据发生更改时才显示更新列表。
目前，当我更改表格列表中的一行时，仅显示第一个数据。在控制台中，我看到了第二个更改的数据，但我的视图没有更改更新列表。
这是我的组件：
import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
...
export class TableListComponent implements OnInit {
private changedData: ItemList[] = [];
private existChangedData: boolean = false;
constructor(private cd: ChangeDetectorRef) { }
onBlur(item: ItemList): void {
this.changedData.push(item);
this.existChangedData = true;
setTimeout(() => { this.refresh(); });
}
refresh() {
this.cd.detectChanges();
}
}
和我的观点：
//requestData is data from HTTP request to a server
<table mat-table [dataSource]="requestData" class="mat-elevation-z5">
<ng-container matColumnDef="ID">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let elem">
<span> {{elem.ID}} </span>
</td>
</ng-container>
<ng-container matColumnDef="NAME">
<th mat-header-cell *matHeaderCellDef> NAME </th>
<td mat-cell *matCellDef="let elem">
<mat-form-field>
<input matInput [(ngModel)]="elem.NAME" #idInput (blur)="onBlur(idInput, elem)">
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedCols"></tr>
<tr mat-row *matRowDef="let row; columns: displayedCols; let i = index"></tr>
</table>
<br>
<br>
<table mat-table [dataSource]="changedData" class="mat-elevation-z5" *ngIf="existChangedData">
<ng-container matColumnDef="ID">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let cdata">
<span>{{cdata.ID}}</span>
</td>
</ng-container>
<ng-container matColumnDef="NAME">
<th mat-header-cell *matHeaderCellDef> NAME </th>
<td mat-cell *matCellDef="let cdata">
<span>{{cdata.NAME}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedCols"></tr>
<tr mat-row *matRowDef="let changedRow; columns: displayedCols"></tr>
</table>
谁能帮我解决这个问题？