对于已知的行数，如何创建具有无限列的 Angular Material 设计 table？

Question

我创建了一个 HTML table，它将根据输入数据中行的数量。我曾尝试使用作为示例，但我正在努力将我的 HTML 转换为 Angular Material 设计。有什么建议吗？

由于 Angular material table 是基于列的（而且我找不到遍历其中的行的方法）我很快就卡住了。

我无法让 angular material table 在 StackBlitz 中工作，所以这是我的代码的复制粘贴：

<table mat-table [dataSource]="newLicenseDS">

    <ng-container *ngFor="let disCol of newLicCol; let idx = index" matColumnDef="{{disCol}}">
        <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
        <ng-container *ngIf="idx==0">
           <td mat-cell *matCellDef="let e">{{e[0]|json}}</td>
        </ng-container>
        <ng-container *ngIf="idx==1">
           <td mat-cell *matCellDef="let e">{{e[1]|json}}</td>
        </ng-container>
        <ng-container *ngIf="idx==2">
           <td mat-cell *matCellDef="let e[2]">{{e|json}}</td>
        </ng-container>
    </ng-container>

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

Answer 1

您唯一需要做的就是“循环”matColumnDef。 -看到我们使用 [matColumnDef] 和 {{element[col]}}

如果你的table像

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

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

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

您只需要转换数据并指明显示的列。你可以在 ngOnInit()

ngOnInit() {
    const head = this.data.map(x => x.name)
    const data: any[] = [];
    this.data.forEach((x, index) => {
      Object.keys(x).forEach((k, index2) => {
        data[index2] = data[index2] || {}
        data[index2][head[index]] = x[k]

      })
    })
    this.displayedColumns=head;
    this.dataSource = data.slice(1); //I remove the first element that was the "header"
  }

参见stackblitz

Update 关于不使用 mat-table 的问题，否则使用简单的 table，只是我们需要使用 displayedColumns 进行迭代。有的喜欢

<table>
  <tr>
    <th *ngFor="let col of displayedColumns">{{col}}</th>
  </tr>
  <tr *ngFor="let row of dataSource">
     <td *ngFor="let col of displayedColumns">{{row[col]}}</td>
  </tr>
</table>

对于已知的行数，如何创建具有无限列的 Angular Material 设计 table？

How can I create an Angular Material Design table with infinite columns, for known number of rows?

angular-material

angular

mat-table