如何使用带有 ngFor 的 mat-table 设置动态数据源?

Question

我正在用角度材料制作一个仪表板。在该仪表板上，我想为每个服务器显示一张卡(到目前为止一切顺利)，在该卡中，我想显示该特定服务器上客户的表。这就是我陷入困境的地方。

使用下面的代码时，我收到以下错误(对于每个表)：

ERROR Error: Could not find column with id "name".

我的相关代码：

<mat-card class="card" *ngFor="let listItem of serverList; let i = index">
<mat-card-header>
<div mat-card-avatar class="card-header-image"></div>
<mat-card-title>{{listItem.name}} - {{ listItem.datasource }}</mat-card-title>
<mat-card-subtitle>{{listItem.url}} - {{listItem.status}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="table-container mat-elevation-z8">
<mat-table #table [dataSource]="listItem.datasource" matSort>
<ng-container matColumnDef="klant">
<mat-header-cell *matHeaderCellDef mat-sort-header> Klant </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</mat-card-content>
</mat-card>

和：

this.fbService.getServerList().subscribe( data => {
this.serverList = data;
});

注意：我使用Firestore来存储服务器和客户。

从理论上讲，我的问题是如何动态设置 [数据源]：

<mat-table #table [dataSource]="listItem.datasource" matSort>

？

Answer 1

我相信数据源的类型必须是 MatTableDataSource

您可以像这样实例化数据源：

this.dataSource = new MatTableDataSource(this.myList);

从服务接收值后，尝试映射这些值：

this.fbService.getServerList().subscribe(data => {
this.serverList = data.map(el =>
el.dataSource = new MatTableDataSource(el.dataSource);
});

Answer 2

我不知道这是否相似，但我正在使用垫手风琴面板对项目进行分组，并在展开时显示子项目的垫子表。

这很容易，因为我使用的类别数组有一个子产品数组。

*ngFor="let cat of categories let i = index;"

在桌子上...

table mat-table [dataSource]="cat.products"

这样做意味着手风琴不会在单击时进行 http 调用，它的工作方式如您所料.美中不足的是更新。

将表数据源设置为迭代子数组意味着它未分配 MatTableDataSource，并且您将无法访问其方法更新好东西。

不怕 不看孩子来救

@ViewChildren(MatTable)
tables: QueryList<MatTable<IProduct>>;

。这使我可以访问视图中的所有表。

这应该允许您进行表更新/删除和操作。例如，如果您向表中添加了新行，则调用 renderRows 方法以使它们出现在表中。

refreshTables(): void {
this.tables.forEach(tbl => tbl.renderRows());
}

我相信有更好的方法可以做到这一点。 无论如何，我希望它能给你一个线索。

Answer 3

我在项目中遇到了同样的问题，我通过制作一个简单的函数解决了它。

<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
<table mat-table [dataSource]="getDataSource(card.title)">

并在打字稿文件中

tableData1: MatTableDataSource<any>;
tableData2: MatTableDataSource<any>;

cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(({ matches }) => {
if (matches) {
return [
{ title: 'Title 1', cols: 2, rows: 1 },
{ title: 'Title 2', cols: 2, rows: 1 },
];
}
return [
{ title: 'Title 1', cols: 1, rows: 1 },
{ title: 'Title 2', cols: 1, rows: 1 },
];
})
);
ngOnInit(): void {
this.auth.user$.subscribe(user => {
this.user = user;
this.afs.collection('post', ref => ref.where('dateTime','>=', this.todayDate).where('createdBy', '==', this.user.uid)).valueChanges().subscribe(data => {
this.tableData1 = new MatTableDataSource(data);
});
this.afs.collection('post', ref => ref.where('dateTime','<=', this.todayDate).where('createdBy', '==', this.user.uid)).valueChanges().subscribe(data => {
this.tableData2 = new MatTableDataSource(data);
});
});
}

函数如下所示：

getDataSource(title) {
if(title==='Title 1') {
return this.tableData1;
}
else return this.tableData2;
}

这个简单的功能为我做了一个技巧！