迭代角度材质表

Question

我使用Angular Materialmat-table，据我所见，它对循环属性(如*matCellDef(有一个特殊的表示法，如本演示所示。为了去除不必要的部分，我尝试迭代记录并动态构建表。我尝试使用<div let element of elements>...</div>进行迭代，但失败了。那么，使用一种特殊的语法可能吗？

以下是我尝试迭代的部分：

<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

Answer 1

创建一个可重用的matTable视图组件，如下所示：

我们可以看到columnHeaders是一个数组。

<ng-container 
*ngFor="let colName of columnHeaders; let i = index" 
matColumnDef="{{ displayedColumns[i] }}"
>

标题值

<th mat-header-cell *matHeaderCellDef mat-sort-header>
<span>
{{ colName }}
</span>
</th>

使用displayedCoumns数组的实际行值。

<td mat-cell *matCellDef="let row">
<span>
{{ row[displayedColumns[i]] }}
</span>
</td>

和数据绑定

<table
[id]="tableId"
matSort
mat-table
[(dataSource)]="dataSource"    
>...

这允许注入dataSource，它是一个任何东西的数组，以及一个列标题和dsiplaycolumns的数组，如下所示：

为了重用上面显示的matTable组件，我们可以注入columnHeaders、displayedColumns和dataSource，如代码所示。

@ViewChild(ParentComponent) matTable:ParentComponent
displayedColumns = ["id", "firstName", "lastName", "updated", "actions"];
columnHeaders = ["ID", "First Name", "Last Name", "Last Updated", "Actions"];
private setTableColumns() {
if (this.people.length > 0) {
this.matTable.displayedColumns = this.displayedColumns;
this.matTable.columnHeaders = this.columnHeaders;
this.matTable.dataSource = this.myArray;
}
}

或者像html中的这样，假设应用程序材料表是一个可重用的视图，显示具有上面显示的绑定。

<app-material-table
[dataSoure]="myArray"
[columnHeaders]="columnHeaders"
[displayedColumns]="displayedColumns"     
</app-material-table>

注意：每当我看到像MatTable这样的东西时，我都会立即考虑创建一个更简化的可重用视图，将使用它的知识抽象为更简单的东西，如上所示。