如何在 Angular2 材质表中映射动态标题和表格内容答案

【问题标题】：How to Map Dynamic Header and table content in Angular2 Material Table如何在 Angular2 材质表中映射动态标题和表格内容
【发布时间】：2018-03-15 16:41:38
【问题描述】：

我在 Angular 材质表中遇到了动态表内容和标题的问题。这是我的表格 JSON 数据。

let dataobj=[
  [
{
  "key": "Data1",
  "value": "ENF"
},
{
  "key": "Data2",
  "value": "10598489700"
},
{
  "key": "Data3",
  "value": "3662946630"
},
{
  "key": "Comments",
  "value": ""
},
{
  "key": "Readonly",
  "value": "true",
  "index": 0
}
],
[
{
  "key": "Data1",
  "value": "FNS"
},
{
  "key": "Data2",
  "value": "10598489700"
},
{
  "key": "Data3",
  "value": "3662946630"
},
{
  "key": "Comments",
  "value": ""
},
{
  "key": "Readonly",
  "value": "true",
  "index": 1
}
]

]

这里是创建 displayColumnHeader 数组值的代码

this.displayColumnHeader = Object.keys(dataobj[0]).map(key => (key));

下面的代码将值传递给数据表

this.dataSource = new MatTableDataSource<Element>(dataobj);

请在下面找到模板和绑定的代码

 <div class="row">
    <div class="col-lg-12">
        <div class="example-container">
        <mat-table #table [dataSource]="dataSource">

          <!-- please check the below code section for this part -->

            <mat-header-row *matHeaderRowDef="let header; displayColumnHeader"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayColumnHeader;"></mat-row>
        </mat-table>
        <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
        </mat-paginator>
        </div>
    </div>
</div>

下面的代码部分用于行和列单元格映射。下面的部分是我很难映射标题单元格和数据单元格的值。因为我在创建模板时不知道属性名称。它是动态的。

<ng-container *ngIf="row.key.indexOf('Readonly')<0 && row.key.toUpperCase().indexOf('COMMENTS')<0">
                <ng-container>
        <mat-header-cell *matHeaderCellDef>{{row.key}}</mat-header-cell>
         <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
                </ng-container>
  </ng-container>

【问题讨论】：

天哪，我也有同样的问题，但我很失望，没有人回答这个问题！你找到解决办法了吗？我对此感到非常疯狂

标签： angular angular5 angular-material2

【解决方案1】：

假设 tabledata 包含表的所有行，并且 displayColumnHeader 包含表的标题，其值是动态的，即仅在运行时知道。

下面几行定义了数据源并设置了材料表的表头。

 <mat-table #table [dataSource]="tabledata" class="mat-elevation-z8" matSort>
 <ng-container *ngFor="let header of displayColumnHeader;let i=index; " [matColumnDef]="header">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> {{header}}
      </th>

下面的代码将每个行单元格映射到一个特定的标题，例如列是键，值是每个行单元格的值

<tr mat-header-row *matHeaderRowDef="displayColumnHeader"></tr>
<tr mat-row *matRowDef="let row; columns: displayColumnHeader; let i = index; let even = even;">
</tr>

【讨论】：