从自定义数组强制刷新多个 mat-table 数据源

Question

我在 Angular2 v8 应用程序中工作，特别是在 material 爆炸软件中。问题是，当我要计算产品的成本时，所有 material 被分成 N 组，这就是我需要的 N mat-table.

这是我的组数组：

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: [] }
];

如果你看到，我的 groups 的每个项目都有一个名为 materials 的属性，那是我推送我的 [=17= 输入的 material 的地方] 接口.

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

所以，很明显，我的许多 mat-table 项必须显示每个 materials: [] 数组的数据

这是我的component.html，我想在这里打印我的materials

<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>

这是我的component.ts

displayedColumnsA = [
  { name: 'name', label: 'Material' },
  { name: 'quantity', label: 'Quantity' },
  { name: 'costu', label: 'Cost' },
  { name: 'costt', label: 'Total Cost' }];
displayedColumns: string[] = ['name', 'quantity', 'costu', 'costt', 'options'];
columnsToDisplay: string[] = this.displayedColumns.slice();

constructor() { }

ngOnInit() {}

addMaterial(index: number) {
this.dialogRef = this.dialog.open(AddMaterialComponent, {
  width: '650px',
  disableClose: true,
  data: { title: 'Add Material' }
});

this.dialogRef.afterClosed().subscribe(result => {
  if (result !== undefined) {
    if (result !== false) {
      this.groups[index].materials.push(result); // Everything works fine at this point, the material was added succsesfuly
      // and here is where I need to refresh the table whith the this.groups[index].materials new value. But I tried everything without succesful

      console.log(this.groups[index].materials);
    }
  }
});
}

有什么方法可以强制 mat-table 使用新值刷新？

注意：我试过ChangeDetectorRef但没用

Answer 1

我已经找到了这个问题的解决方案，基本上如果你这样做的话：

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;
});

您可以在此处查看问题 -> https://github.com/angular/material2/issues/8381

Answer 2

Material table refresh for multiple tables

如所述，您可以使用@ViewChild获得mat-table的参考。

@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());
}

从自定义数组强制刷新多个 mat-table 数据源

Force refresh multiple mat-table dataSource from custom Array

typescript

angular-material

angular

mat-table