如何为已知行数创建具有无限列的 Angular Material Design 表? [英] How can I create an Angular Material Design table with infinite columns, for known number of rows?

问题描述

我创建了一个 HTML 表格，它将根据输入数据中的行数.我尝试使用 this SO post 作为示例，但是我正在努力将我的 HTML 转换为 Angular Material 设计.有什么建议吗?

StackBlitz 演示

由于 Angular 材料表是基于列的(而且我找不到迭代其中行的方法)，我很快就卡住了.

我无法在 StackBlitz 中使用有角度的材料表，所以这是我的代码的复制粘贴:

<ng-container *ngFor="let disCol of newLicCol; let idx = index" matColumnDef="{{disCol}}"><th mat-h​​eader-cell *matHeaderCellDef>{{disCol}}</th><ng-container *ngIf="idx​​==0"><td mat-cell *matCellDef="let e">{{e[0]|json}}</td></ng-容器><ng-container *ngIf="idx​​==1"><td mat-cell *matCellDef="let e">{{e[1]|json}}</td></ng-容器><ng-container *ngIf="idx​​==2"><td mat-cell *matCellDef="let e[2]">{{e|json}}</td></ng-容器></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="newLicCol"></tr><tr mat-row *matRowDef="let row; columns: newLicCol"></tr>

解决方案

你唯一需要的是循环"matColumnDef.- 看到我们使用 [matColumnDef] 和 {{element[col]}}

如果你的桌子像

<ng-container *ngFor=让显示列的列数"；[matColumnDef]=col"><th mat-h​​eader-cell *matHeaderCellDef>{{col}}</th><td mat-cell *matCellDef=let element">{{element[col]}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef=displayedColumns"></tr><tr mat-row *matRowDef="let row;列:displayedColumns;"></tr>

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

ngOnInit() {const head = this.data.map(x => x.name)常量数据:any[] = [];this.data.forEach((x, index) => {Object.keys(x).forEach((k, index2) => {数据[索引2] = 数据[索引2] ||{}数据[index2][head[index]] = x[k]})})this.displayedColumns=head;this.dataSource = data.slice(1);//我删除了作为标题"的第一个元素；}

参见 stackblitz

更新关于这个问题不使用 mat-table 或者一个简单的表格，我们只需要使用 displayColumns 进行迭代.有些喜欢

<tr><th *ngFor=让显示列的列数">{{col}}</th></tr><tr *ngFor="let row of dataSource"><td *ngFor=让显示列的列">{{row[col]}}</td></tr>

I have created an HTML table which will generate infinite columns based on the number of rows in the input data. I've tried to use this SO post as an example, but I'm struggling to convert my HTML to Angular Material design. Any suggestions?

StackBlitz demo

Since Angular material tables are column-based (and I couldn't find a way to iterate over the rows within them) I got stuck pretty quickly.

I couldn't get angular material tables working in the StackBlitz, so here is a copy paste of my code:

<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>

解决方案

the only thing you need is "loop" the matColumnDef. -see that we use [matColumnDef] and {{element[col]}}

If your table is like

<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>

You only need transform your data and indicate the displayedColumns. You can do in a 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"
  } 

See in stackblitz

Update about the question not use a mat-table else a simple table, just we need iterate using displayedColumns. Some like

<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 Design 表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！