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

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

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

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

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

Основная таблица

Как я могу подойти к этой проблеме? Я пытался посмотреть на команду "ngFor" и "keyvalue", но я не могу выбраться из этого...


angular angular8 mat-table ngfor custom-data-type
person Federico Andreoli    schedule 23.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я делаю что-то вроде этого:

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

person Ilija Iličić    schedule 23.03.2020