Question

我有一张angular-material表，datasource来自variable array

数组可以包含屏幕表单推送的元素。这工作正常，元素被推送，并确保我打印出整个数据源，我的新对象在那里反映。

以下是代码：

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>

Answer 1

表格在运行时没有检测到动态变化，你必须自己刷新表格。

看看this example。您可以看到，在将新元素推送到数组后，我必须手动重置dataSource。

角度材料 - 触发表数据刷新

1 个答案: