Question

我在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 Array值的代码

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

下面的代码用于将值传递给datatable

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 contians头文件，其值是动态的，即仅在运行时才知道。

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

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

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

1 个答案: