Заполните mat-таблицу несколькими вложенными пользовательскими данными в Angular 8.3.23

Question

Я знаю, что это немного специфично c, но я пытаюсь заполнить таблицу дочерними элементами нескольких вложенных данных.

Мои данные организованы следующим образом: каждый из моих объектов имеет идентификатор имя и кривая; каждая кривая имеет значение и неделю cusotm, а каждая неделя имеет несколько базовых c полей. Это «трехуровневая иерархия»:

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

Я пытаюсь поставить таблицу матов в столбцы «Описание» и «Значения» различных кривых, см. Рисунки для лучшего объяснения. (NB описание является только примером, это будет более длинная строка)

Как я могу подойти к этой проблеме? Я пытался посмотреть на команды "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, и это прекрасно работает для меня. Я надеюсь, что это поможет вам. Я также хочу знать, есть ли лучшее решение для этого!