Angular 将贴图对象（带有动态关键点和值）渲染到角度贴图表中（列和行作为贴图的关键点和值）

我正在开发一个POC，使用angular8作为前端，SpringBoot作为后端。My backend函数返回一个映射对象列表（

List

），其中包含动态键和值。 我需要在前端使用mat表在mat对话框内容中使用此贴图数组。我一直坚持将键和值定义为mat表所需的属性。请帮助我填充映射对象的动态列表（列标题作为映射键，行作为映射值）

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

组成部分：

导出类ProfileDialogComponent{
用户名：String=“”；
mapArray:Map[]=[]；
构造函数（私有dialogRef:MatDialogRef，
@注入（MAT_对话框_数据）数据，私有用户服务：用户服务）{
this.username=data.username；
this.userService.getImportedUserCareer（this.username）.subscribe（数据=>{
this.mapArray=数据；
});
}
}

html:

{{column}}
{{元素[列]}}

此时，我得到以下错误： 错误：提供了重复的列定义名称：“列”

我用字符串和字符串值的映射填充组件中的映射数组。但html中的实现逻辑并不完整，如果有人能指导我如何在mat表中填充地图数据，那将非常有帮助

PS：我迭代了mat对话框内容中的映射数组，以便获得mat表中的每个映射对象，因此映射键和值应填充为每个mat表列标题和每个mat对话框内容中的行

下面是数据示例

[
  {
    "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
  }
]

请帮忙

谢谢，

---

Shihad

以下模板适用于您：

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

[{“测试比赛”：320，“跑动”：17500，“高分”：242，“平均击球数”：65.42，“边线”：14，“平均保龄球数”：31.76，“最佳保龄球数”：1/34，“接球数”：173，“MoS”：25}，{“ODI比赛”：150，“跑动”：15750，“高分”：184，“平均击球数”：62.75，“接球数”：173，“妈妈”：54}]，添加了JSON数据。

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