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

Question

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

我的数据组织如下：我的每个实体都有一个 ID、一个名称和一条曲线；每条曲线都有一个值和一个自定义周，每个周都有一些基本字段。这是一个 "three level hyerarchy":

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

我正在尝试用不同曲线的 "Description" 和 "Values" 列填充一个 mat-table，请参阅图片以获得更好的解释。 (NB description只是一个例子，会是一个更长的字符串)

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

Answer 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 之前构建数据，这对我来说工作正常。我希望这会帮助你。我也很想知道有没有更好的解决方案！

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

Populate mat-table with multiple nested custom data on Angular 8.3.23

angular

angular8

ngfor

mat-table

custom-data-type