Визуализация больших вложенных объектов [Angular + Ngrx]

Вопрос. У меня большой вложенный массив с несколькими уровнями вложенных дочерних элементов. Объект, который я возвращаю из API, плоский, на основе ParentId я могу знать родителя.

В моем HTML я хочу перебрать каждый объект и показать его детям.

Есть ли у кого-нибудь причудливый способ написать createSelector и способ выбора состояния на каждом этапе цикла в HTML, так что почему я обновляю вложенный дочерний элемент, он не повторно отображает весь HTML, а только повторно отображает объект, который был обновлен.

Я рассмотрел способ работы с таблицей материалов Angular, пытаясь понять, есть ли у кого-нибудь еще концепция или способ сделать это.

Информация о приложении:

• Фреймворк: Angular 5 универсальный
• Управление заявлением: Ngrx
• Бэкэнд: узел + чванство

Мой вызов API возвращает большой массив с типом объекта:

{
  "id": "299999999"
  "parentId": "5ad4d",
  "body": "string",
  "type": "test"
}

Каждый объект имеет parentID, который позволяет узнать, какой дочерний объект находится ниже дочернего объекта.

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

interface AppState {
  list: [
{
  "id": "299999999"
  "parentId": "5ad4d",
  "body": "string",
  "type": "test"
}
{
  "id": "2abc"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcd"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcde"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcde"
  "parentId": "6dda4",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcdefg"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
{
  "id": "23sadasd"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
{
  "id": "12asdasd"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
];
}