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

Question

我在带有动态表格内容和标题的角度材料表中遇到问题。这是我的 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 Array 值的代码

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>

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