Angular 角度材质-触发表格数据刷新

我有一个

角度材料

表，其中

数据源

来自

变量数组

该数组可以由屏幕窗体推送元素。这可以很好地工作，元素被推送，为了确保它，我打印出整个数据源，并且我的新对象反映在那里

这是代码：

reportFields = [{name: "name_test", filter: "filter_test" }];
 addReportField(){
        this.reportFields.push({
            name: this.fieldToAdd.name,
            filter: this.fieldToAdd.filter
        });
        this.frmField.reset();
        this.changeDetectorRefs.detectChanges();
        console.log(this.reportFields);
    }

reportFields是数据源，当页面加载时，表将加载其中的数据。但是，当我在运行时使用addReportField方法添加一个时，数据源不会重新加载

我尝试使用ChangeDectectorRef，然后检测更改，但没有成功

这是表格的HTML

<mat-table [dataSource]="reportFields" style="background: inherit;">
            <ng-container matColumnDef="field">
                <mat-header-cell *matHeaderCellDef>Field Name</mat-header-cell>
                <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
            </ng-container>

            <ng-container matColumnDef="filter">
                <mat-header-cell style="margin-right: 20px;" *matHeaderCellDef>Filter</mat-header-cell>
                <mat-cell style="margin-right: 20px;" *matCellDef="let element">
                    {{element.filter}}
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="delete">
                <mat-header-cell style="text-align: end;" *matHeaderCellDef></mat-header-cell>
                <mat-cell *matCellDef="let element" style="text-align: end;">
                    <mat-icon (click)="deleteReturn(element.id, 'standard')" style="font-size: 24px; cursor: pointer;" matTooltip="Delete">clear</mat-icon>
                </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="reportFieldsColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: reportFieldsColumns;"></mat-row>
        </mat-table>

字段名
{{element.name}
滤器
{{element.filter}
清楚的

表在运行时未检测到动态更改，您必须自己刷新表

---

看一看。您可以看到，将新元素推送到数组后，我必须手动重置数据源。

仅链接回答。请把相关的代码在答案本身，这样当链接死在未来的答案仍然是使用。