在 Angular 8.3.23 上使用多个嵌套自定义数据填充 mat-table

【问题标题】：Populate mat-table with multiple nested custom data on Angular 8.3.23在 Angular 8.3.23 上使用多个嵌套自定义数据填充 mat-table
【发布时间】：2020-07-03 19:17:28
【问题描述】：

我知道这有点具体，但我正在尝试用多个嵌套数据的子项填充一个表。

我的数据组织如下：我的每个实体都有一个id、一个名称和一条曲线；每条曲线都有一个值和一个自定义周，每个周都有一些基本字段。这是一个“三层结构”：

Entry:
- Id
- Name
- Curve (Map):
    • Value
    • Week(key):
        → Description (string)
        → Date

我正在尝试使用不同曲线的“描述”和“值”列填充垫表，请参阅图片以获得更好的解释。（NB描述只是一个例子，它会是一个更长的字符串）

我该如何解决这个问题？我试图查看命令“ngFor”和“keyvalue”，但我无法摆脱这个......

【问题讨论】：

标签： angular angular8 ngfor mat-table custom-data-type

【解决方案1】：

我正在做这样的事情：

例如，我有服务myService 和getData()，我在其中获取数据，在我的 .ts 文件中我有这样的内容：

dataTable;

this.myService.getData().subscribe((result) => {
  for (const data of result.curve) {
    result['value'] = data.value;
    result['description'] = data.week.description;
  }

this.dataTable = new MatTableDataSource(result);
})

这段代码假设结果 JSON 的数据结构如下：

{
    "id": 1,
    "name": "some name",
    "curve": {
        "value": "some value",
        "week": {
            "description": "some string",
            "date": "some Date format"
        }
    }
}

所以我在创建新的 MatTableDataSource 之前构建数据，这对我来说很好。我希望这会对你有所帮助。我也很想知道有没有更好的解决方案！

【讨论】：