如何在Angular2材质表中映射动态标题和表内容 [英] How to Map Dynamic Header and table content in Angular2 Material Table

问题描述

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

I am getting issue in Angular material table with dynamic table content and header. Here is my JSON data for table.

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数组值的代码

Here is the code for creating the displayColumnHeader Array value

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

以下用于将值传递到数据表的代码

Below code for passing the value to datatable

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

请找到以下用于模板和绑定的代码

Please find the below code for template and bindings

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

下面的代码部分用于行和列单元格映射.下一节是我在映射标头单元格和数据单元格的值方面的工作.因为创建模板时我不知道属性名称.它是动态的.

Below code section for row and column cell mapping. The below section is I am struggle to map the value for header cell and data cell. Because i don't know the property name when creating the template. it's dynamic.

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

推荐答案

假定tabledata包含表的所有行以及该表的displayColumnHeader contians头文件，其值是动态的，即仅在运行时才知道.

Assuming tabledata contains all the rows of the table and displayColumnHeader contians headers of the table whose values are dynamic i.e known at run time only.

下面几行定义了数据源并设置了材料表的标题.

Below lines defines the datasource and sets the header of the material table.

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

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

Below code maps each row cell to a particular header,such like column being key and value being each row cell value

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

这篇关于如何在Angular2材质表中映射动态标题和表内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！