Angular mat-table 显示每行中键值 json 的动态数据答案

【问题标题】：Angular mat-table display dynamic data from key value json in each rowAngular mat-table 显示每行中键值 json 的动态数据
【发布时间】：2021-09-05 23:44:03
【问题描述】：

我有下面的 json 并且想在材质表中以角度渲染

var res = '[
  {
    "DynamicName": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "dynamic": "xyz"
  },
  {
    "DynamicName": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "dynamic": "xyz"
  },
  {
    "DynamicName": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "DynamicLevel": "xyz",
    "dynamic": "xyz"
  }]';

在第二个响应中，这个 json 将如下所示

var res = '[
      {
        "DynamicCity": "xyz",
        "DynamicCountry": "xyz",
        "DynamicState": "xyz",
        "DynamicRegion": "xyz",
        "dynamic": "xyz"
      },
      {
        "DynamicCity": "xyz",
        "DynamicCountry": "xyz",
        "DynamicState": "xyz",
        "DynamicRegion": "xyz",
        "dynamic": "xyz"
      },
      {
        "DynamicCity": "xyz",
        "DynamicCountry": "xyz",
        "DynamicState": "xyz",
        "DynamicRegion": "xyz",
        "dynamic": "xyz"
      }]';

这个数据需要渲染到材质表中我试过这样

// properties of the class
displayedColumns: string[];//columns should be create dynamically
dataSource = res;

    <table mat-table [dataSource]="dataSource | keyvalue" class="mat-elevation-z8">
      <ng-container matColumnDef="key">
        <th mat-header-cell *matHeaderCellDef> {{element.key}}</th>
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
      </ng-container>  
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

I need output like below

在这里，动态列意味着在每个 api 调用中，我们为该列名称获取不同的数据，因此每次 api 调用都会更改它，因此我无法将其绑定到材料表。请帮我解决将json数据绑定到材料表的问题。参考网址：-

【问题讨论】：

标签： angular angular-material

【解决方案1】：

HTML

<div class="demo-button-container">
  <button mat-raised-button (click)="addData()" class="demo-button">
    Add data
  </button>
  <button
      mat-raised-button
      [disabled]="!dataSource.length"
      (click)="removeData()"
      class="demo-button">
    Remove data
  </button>
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
  <!-- Position Column -->
 <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>
        {{col}}
      </th>
      <td mat-cell *matCellDef="let element">
        {{element[col]}}
      </td>
    </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material/table';

export interface dynElement {
  DynamicName: string,
  DynamicLevel_1: string,
  DynamicLevel_2:string,
  DynamicLevel_3:string,
  dynamic:string
}

const ELEMENT_DATA: any [] = [
  {
    DynamicName: "xyz",
    DynamicLevel_1: "xyz",
    DynamicLevel_2: "xyz",
    DynamicLevel_3: "xyz",
    dynamic: "xyz"
  },
  {
    DynamicName: "xyz",
    DynamicLevel_1: "xyz",
    DynamicLevel_2: "xyz",
    DynamicLevel_3: "xyz",
    dynamic: "xyz"
  },
  {
    DynamicName: "xyz",
    DynamicLevel_1: "xyz",
    DynamicLevel_2: "xyz",
    DynamicLevel_3: "xyz",
    dynamic: "xyz"
  },
  {
    DynamicName: "xyz",
    DynamicLevel_1: "xyz",
    DynamicLevel_2: "xyz",
    DynamicLevel_3: "xyz",
    dynamic: "xyz"
  },
]
@Component({
  selector: 'table-dynamic-array-data-example',
  styleUrls: ['table-dynamic-array-data-example.css'],
  templateUrl: 'table-dynamic-array-data-example.html',
})
export class TableDynamicArrayDataExample {
  
  // your Object Key Object.keys(obj)

  displayedColumns: string[] = [...Object.keys(ELEMENT_DATA[0])];
  dataSource = [...ELEMENT_DATA]; // you can pass your data from backend here

  @ViewChild(MatTable) table: MatTable<any>;

  addData() {
    const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length);
    this.dataSource.push(ELEMENT_DATA[randomElementIndex]);
    this.table.renderRows();
  }

  removeData() {
    this.dataSource.pop();
    this.table.renderRows();
  }
}

stackblitz中的演示

【讨论】：

displayedColumns 您已创建静态列。就我而言，它将是动态的兄弟
也许这可以帮助你； )
感谢您的支持
欢迎您。这回答了你的问题吗？
感谢您的帮助。我也对你的回答投了票。

【解决方案2】：

我为您创建了 Stackblitz。这应该适用于任何具有简单值对象的列表（将从第一个对象中获取键，因此当前列表的所有对象都需要相同（如果不创建单独的表就无法解决这个问题））： https://stackblitz.com/edit/angular-pqgny8?file=src/app/table-basic-example.html

HTML：

<table *ngIf="dataSource && displayedColumns" mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let k of displayedColumns">
    <ng-container [matColumnDef]="k">
      <th mat-header-cell *matHeaderCellDef> {{k}}</th>
      <td mat-cell *matCellDef="let element"> {{element[k]}} </td>
    </ng-container>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

TS：

getData() {
this.dataSource = ELEMENT_DATA; // ELEMENT_DATA is the data from your backend
this.displayedColumns = Object.keys(this.dataSource[0]).map(k => k)

}

【讨论】：

感谢您的帮助。我也对你的回答投了票。

【解决方案3】：

 import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
  title = 'jsonDemo';

  ELEMENT_DATA1 = [
    { 'DynamiCCity': 'Hydrogen' , 'DynamicCountry' : 'Country', 'DynamicState' : 'State' , 'DynamicRegion' :'DynamicRegion' , 'dynamic' :'dynamic' },
    { 'DynamiCCity': 'Hydrogen 1' , 'DynamicCountry' : 'Country 1', 'DynamicState' : 'State 1' , 'DynamicRegion' :'DynamicRegion 1' , 'dynamic':'dynamic 1' },
  ];

  displayedColumns: string[] = [];
  dataSource1 = this.ELEMENT_DATA1;
 
  ngOnInit(): void
  {
    this.displayedColumns = Object.getOwnPropertyNames(this.ELEMENT_DATA1[0]);
  }
}


<h2>Demo</h2>

<style>
  table {
  width: 100%;
}
</style>


<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container *ngFor="let item of displayedColumns" matColumnDef="{{item}}">
    <th mat-header-cell *matHeaderCellDef> {{item}} </th>
    <td mat-cell *matCellDef="let element"> {{ element[item] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>


<router-outlet></router-outlet>

我希望上面的代码是您问题的工作演示。它将按预期工作。

【讨论】：