将地图对象(带有动态键和值)渲染到有角度的mat-table(列和行作为地图的键和值)中 [英] Render a map object (with dynamic keys and values) into angular mat-table (columns and rows as keys and values of the map)

问题描述

我正在开发使用angular8作为前端和SpringBoot作为后端的POC.我的后端函数向我返回了具有动态键和值的Map对象列表( List< Map<字符串，对象>> ).我需要在mat-dialog-content内部使用mat-table在前端角度使用此映射数组.我坚持将键和值定义为mat表的必需属性.请帮助我填充地图对象的动态列表(列标题为地图键，行为地图值).

I am developing a POC using angular8 as frontend and SpringBoot as backend. My backend function returns me a List of Map objects (List < Map < String, Object > >) which has dynamic keys and values. I need to use this map array in frontend angular using mat-table inside mat-dialog-content. I'm stuck on defining the keys and values as the required attributes for the mat table. Please help me in populating the dynamic list of map objects (column headers as map key, and row as map value).

在下面发布了我的组件和html文件:

Posted my component and html files below:

组件:

export class ProfileDialogComponent {
  username: String = "";
  mapArray: Map < String, Object > [] = [];
  constructor(private dialogRef: MatDialogRef < ProfileDialogComponent > ,
    @Inject(MAT_DIALOG_DATA) data, private userService: UserService) {
    this.username = data.username;
    this.userService.getImportedUserCareer(this.username).subscribe(data => {
      this.mapArray = data;
    });
  }
}

html:

<div>
  <mat-dialog-content *ngFor="let map of mapArray">
    <mat-table class="mat-elevation-z8" [dataSource]="map">

      <ng-container matColumnDef="column" *ngFor="let column of map | keyvalue">
        <mat-header-cell *matHeaderCellDef>{{column}}</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element[column]}}</mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="map"></mat-header-row>
      <mat-row *matRowDef="let row; columns: map"></mat-row>
    </mat-table>
  </mat-dialog-content>
</div>

在这一点上，我得到以下错误:错误:提供的列定义名称重复:"column".

At this point I'm getting the following error: Error: Duplicate column definition name provided: "column".

我在组件中填充了映射数组，其中包含字符串和字符串值的映射.但是html中的实现逻辑并不完整，如果有人可以指导我如何在mat table中填充地图数据，那将非常有帮助.

I have the map array populated in my component with map of string and string values. But the implementation logic in html is not complete, it would be really helpful if somebody can guide me how to populate the map data in mat table.

PS:我已经在mat-dialog-content中迭代了map数组，以便将每个map对象都保存在mat-table中，因此应该将map键和值填充为每个mat-table的列标题和每个行中的行mat-dialog-content.

PS: I have iterated the map array in mat-dialog-content so that I get each map object in mat-table, so that the map keys and values should be populated as each mat-table column headers and rows inside each mat-dialog-content.

下面是数据样本

[
  {
    "Test Matches": 320,
    "Runs": 17500,
    "High Score": 242,
    "Batting Avg": 65.42,
    "Wickets": 14,
    "Bowling Avg": 31.76,
    "Best Bowling": "1/34",
    "Catches": 173,
    "MoS": 25
  },
  {
    "ODI Matches": 150,
    "Runs": 15750,
    "High Score": 184,
    "Batting Avg": 62.75,
    "Catches": 173,
    "MoM": 54
  }
]

请帮助！

谢谢，西哈德

推荐答案

以下模板应为您工作:

<div *ngFor="let map of mapArray">
  <mat-table class="mat-elevation-z8" [dataSource]="[map]">
    <ng-container [matColumnDef]="column.key" *ngFor="let column of map | keyvalue">
      <mat-header-cell *matHeaderCellDef>{{ column.key }}</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ column.value }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="({}).constructor.keys(map)"></mat-header-row>
    <mat-row *matRowDef="let row; columns: ({}).constructor.keys(map)"></mat-row>
  </mat-table>
</div>

Stackblitz示例

Stackblitz Example

请注意，为了获得更好的性能，您可以将({}).constructor.keys(map)替换为您自己的自定义管道，例如 map |键，其中管道是:

Note that for better performance you can replace ({}).constructor.keys(map) with your own custom pipe like map | keys where pipe is:

@Pipe({ name: 'keys' })
export class EnumToArrayPipe implements PipeTransform {
  transform(data: {}) {
    return Object.keys(data);
  }
}

这篇关于将地图对象(带有动态键和值)渲染到有角度的mat-table(列和行作为地图的键和值)中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！