将映射 object（具有动态键和值）呈现为 angular mat-table（列和行作为映射的键和值）

Question

我正在开发一个 POC，使用 angular8 作为前端，使用 SpringBoot 作为后端。我的后端函数 returns 是一个具有动态键和值的映射列表 objects (List < Map < String, Object > >)。我需要在前端 angular 中使用此地图数组，在 mat-dialog-content 中使用 mat-table。我坚持将键和值定义为垫子 table 的必需属性。请帮助我填充地图 objects 的动态列表（列 headers 作为地图键，行作为地图值）。

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

组件：

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

我在我的组件中填充了地图数组，其中包含字符串和字符串值的地图。但是 html 中的实现逻辑并不完整，如果有人能指导我如何在 mat table.

中填充地图数据，那将非常有帮助

PS：我已经迭代了 mat-dialog-content 中的地图数组，所以我得到了 mat-table 中的每个地图 object，因此地图键和值应该是填充为每个 mat-table 列 headers 和每个 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
  }
]

请帮忙！

谢谢，什哈德

Answer 1

以下模板应该适合您：

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

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

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

将映射 object（具有动态键和值）呈现为 angular 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)

angular

mat-table