渲染大型嵌套 objects [Angular + Ngrx]

Question

问题我得到了一个包含多层嵌套 children 的大型嵌套数组。我从 API 返回的 object 是平的，根据 ParentId 我可以知道 parent.

在我的 HTML 中，我想遍历每个 object 并显示它 children.

有没有人有编写 createSelector 的怪异方法以及在 HTML 的每个循环阶段 select 状态的方法，所以我更新嵌套的 child ，它不会 re-render 整个 HTML，而只是 re-render 更新的 object。

我看过 Angular material table 做事的方式，想看看是否有其他人对此有概念或做事方式。

应用信息：

框架：Angular5个通用
声明管理：Ngrx
后端：Node + swagger

我的 API 调用 returns 类型为 object 的大型数组：

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

每个 object 都有一个 parentID，可以知道 child 在 child object.

下面

我正在以我的状态存储列表中的所有内容。如您所见，该列表有 3 个嵌套的 children，但我可能嵌套了大约 20 层深的 children。

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"
}
];
}

Answer 1

如果您不想重新呈现整个列表（这是件好事），您没有太多选择。

尝试拥有一个备忘的选择器是一个好方法，但这还不够。

您应该做的第一件事是在 ngFor 循环中定义 trackBy 函数。 trackBy 函数将一个对象作为参数，您应该 return 一些东西以独特的方式识别此资源，例如通过 returning 它的 ID。

这样，Angular 将不会重新呈现整个列表。

我已经解释了如何确保它不会在此处重新呈现：

渲染大型嵌套 objects [Angular + Ngrx]

Rendering large nested objects [Angular + Ngrx]

angular

typescript

ngrx

reducers

ngrx-store