Angular 从自定义数组强制刷新多个mat表数据源

我在Angular2 v8应用程序中工作，特别是在材料爆炸软件中。问题是，当我想计算一个产品的成本时，所有的材料都被分成N组，这就是我需要N个表的内容

这是我的组数组：

groups: GroupItem[] = [
  { _id: '', name: 'Group 1', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] },
  { _id: '', name: 'Group 2', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] },
  { _id: '', name: 'Group 3', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] }
];

如果您看到，我的

组

中的每个项目都有一个名为

材料

的属性，这就是我推送通过

产品材料项

界面键入的材料的地方

export interface ProductMaterialItem {
  material: name;
  quantity: number;
  cost: number;
}

因此，很明显，我的许多mat表项必须显示每个

材质的数据：[]

数组

这是我想要打印材料的组件.html

<div id="groups-container" style="width: 100%;">
    <div class="group-item" *ngFor="let group of groups; let i = index">
        <div id="group-header" class="group-header">
            <span>{{ group.name }}</span>
        </div>
        <div id="materials-content">
            <table mat-table [dataSource]="group.materials" fxFlex="100">
                <ng-container [matColumnDef]="column.name" *ngFor="let column of displayedColumnsA">
                    <th mat-header-cell *matHeaderCellDef> {{column.label}} </th>
                    <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
                </ng-container>

                <ng-container matColumnDef="options">
                    <th mat-header-cell *matHeaderCellDef style="width: 30px;">
                      <a (click)="addMaterial(i)">Add Material</a>
                    </th>
                    <td mat-cell *matCellDef="let element" style="width: 30px;">
                        <mat-icon class="material-icons-outlined">cancel</mat-icon>
                    </td>
                </ng-container>

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

有没有办法强制使用新值刷新mat表

---

注意：我尝试了

ChangeDetectorRef

但没有成功

我已经找到了解决此问题的方法，基本上如果您：

this.dataSource.data.push(newElement); //Doesn't work

但是，如果替换整个阵列，则它可以正常工作。因此，您的最终代码必须是：

this.socket.on('newMessage', function(event) {
const data = this.dataSource.data;
data.push(event);
this.dataSource.data = data;

}))

您可以在此处看到问题->

多个表的材质表刷新

如前所述，您可以使用

@ViewChild

获取

垫表的参考

@ViewChild
是获取第一个或单个引用，要获取多个引用，您需要使用下面显示的示例
@ViewChildren

import {Component, ViewChildren} from '@angular/core';
...
@ViewChildren(MatTable) matTables : QueryList<MatTable>;
...

refreshFunc() {
 console.log(this.matTables); // this will log all the material table's references
 //You can also make use of toArray() function and loop, to get each reference
 this.matTables.toArray().forEach(each => each.renderRows());
}

从'@angular/core'导入{Component，ViewChildren}；
...
@ViewChildren（MatTable）matTables:QueryList；
...
refreshFunc（）{
console.log（this.matTables）；//这将记录所有材质表的引用
//还可以使用toArray（）函数和循环来获取每个引用
this.matTables.toArray（）.forEach（each=>each.renderRows（））；
}
此问题已得到解答，请在表上使用
renderRows（）
谢谢@sameerkan解决方案有效，不幸的是，它仅适用于第一个表，但第二个、第三个、第四个或N个表，问题仍然存在请查看：）
import {Component, ViewChildren} from '@angular/core';
...
@ViewChildren(MatTable) matTables : QueryList<MatTable>;
...

refreshFunc() {
 console.log(this.matTables); // this will log all the material table's references
 //You can also make use of toArray() function and loop, to get each reference
 this.matTables.toArray().forEach(each => each.renderRows());
}