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

问题描述

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

let dataobj=[[{"key": "数据 1",值":ENF"},{"key": "数据 2",价值":10598489700"},{"key": "数据3",价值":3662946630"},{"key": "评论",价值": ""},{"key": "只读",价值":真实"，索引":0}],[{"key": "数据 1",值":FNS"},{"key": "数据 2",价值":10598489700"},{"key": "数据3",价值":3662946630"},{"key": "评论",价值": ""},{"key": "只读",价值":真实"，索引":1}]

]

这里是创建 displayColumnHeader Array 值的代码

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

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

this.dataSource = new MatTableDataSource(dataobj);

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

 
<div class="col-lg-12"><div class="example-container"><mat-table #table [dataSource]="dataSource"><!-- 请检查下面这部分的代码部分--><mat-h​​eader-row *matHeaderRowDef="let header; displayColumnHeader"></mat-h​​eader-row><mat-row *matRowDef="let row; columns: displayColumnHeader;"></mat-row></mat-table><mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

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

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

解决方案

假设 tabledata 包含表的所有行和表的 displayColumnHeader contians 标题，其值是动态的，即仅在运行时已知.

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

 <ng-container *ngFor="let header of displayColumnHeader;let i=index; " [matColumnDef]="header"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>{{标题}}</th>

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

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

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

]

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>

解决方案

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 Material Table 中映射动态标题和表格内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！