如何为已知行数创建具有无限列的 Angular Material Design 表？

Posted 2023-02-26

【中文标题】如何为已知行数创建具有无限列的 Angular Material Design 表？

【英文标题】：How can I create an Angular Material Design table with infinite columns, for known number of rows?

【发布时间】：2019-12-30 04:50:53

【问题描述】：

我创建了一个 html 表格，它将根据 输入数据中的行数。我尝试以this SO post 为例，但我正在努力将我的 HTML 转换为 Angular Material 设计。有什么建议吗？

StackBlitz demo

由于 Angular 材质表是基于列的（而且我找不到迭代其中的行的方法）我很快就卡住了。

我无法在 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>

【问题讨论】：

为什么？这有什么真正的原因吗？性能会咬你。

不一定是无限的，但是我不能提前知道会有多少列，可能远少于一百列，但我不能保证，哪个这就是我为什么要这样写的原因

【参考方案1】：

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

如果你的桌子是这样的

<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

更新关于不使用 mat-table 其他简单表格的问题，只是我们需要使用 displayColumns 进行迭代。有些人喜欢

<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 的情况下做到这一点？我正在使用 Angular 8

@Rishabh，当然，您还有“displayedColumns”和“dataSource”。它只是对此进行迭代，我更新了答案（具有两个模型的 stackblitz 在这个：stackblitz.com/edit/…。注意：您可以使用 <pre>displayedColumns|jsondatasource|json</pre> 查看“数据”以了解如何工作

感谢您的回复，它工作得很好。但我意识到这并不是我想要做的，我的数组是一个简单的字符串数组，需要以 4xn 的方式显示。 4 行和 n 列。我正在尝试如何在第四个元素之后移动到新列。我已经能够使用 ul li 来做到这一点

@Rishabh，有些人喜欢这样SO?