迭代角材料表

Question

我使用 Angular Material mat-table，据我所知，它有一个循环属性的特殊符号，如 *matCellDef，如 Demo 所示。为了删除不必要的部分，我正在尝试迭代记录并动态构建表。我尝试使用<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>

使用显示的Coumns 数组的实际行值。

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

和数据绑定

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

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

要重用上面显示的 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 是一个可重用的视图，显示了上面显示的绑定。

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

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