angular - 使用特定类型的数据源创建材料表

Question

我什至不知道从哪里开始，材料文档也无法为我指明正确的方向。我想知道是否可以mat-table使用如下所示的数据源创建一个：

[
{columnName: "First Name", rowsList: ["John","James","Mark"]},
{columnName: "Last Name", rowsList: ["Jones","Anderson", "Jacobs"]}
]

理想情况下，它看起来像这样

名	姓
约翰	琼斯
詹姆士	安德森
标记	雅各布斯

标签： angularangular-material

Answer 1

这个实现的关键是数据的转换

const DATA: { columnName: string; rowsList: string[] }[] = [
  { columnName: "First Name", rowsList: ["John", "James", "Mark"] },
  { columnName: "Last Name", rowsList: ["Jones", "Anderson", "Jacobs"] }
];

columns: string[] = DATA.map(x => x.columnName);
data: { [key: string]: string }[] = [];

DATA[0].rowsList.forEach((x, i) => {
  const element: { [key: string]: string } = {};
  DATA.forEach(x => {
    element[x.columnName] = x.rowsList[i];
  });

  this.data.push(element);
});

在此之后，mat-table 很容易

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let column of columns">
    <ng-container [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef>{{column}}</th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>
  </ng-container>

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

堆栈闪电战