Question

问题我有一个带有几层嵌套子元素的大型嵌套数组。我从API返回的对象是平的，基于ParentId，我可以知道父。

在我的HTML中，我想循环遍历每个对象并将其展示给孩子们。

是否有任何人有一种奇怪的方式来编写createSelector和一种在HTML中的每个循环阶段选择状态的方法，这就是为什么我更新嵌套的子进程，它不会重新呈现整个HTML，而只是重新 - 渲染已更新的对象。

我看过Angular材料表的做法，试图看看是否有其他人有这样的概念或方法。

应用信息：

框架：Angular 5 universal
法规mgmt：Ngrx
后端：Node + swagger

我的API调用返回一个类型为object的大数组：

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

Answer 1

如果你不想重新渲染整个列表（这是一件好事），你没有太多选择。

尝试使用memoized选择器是一种很好的方法，但这还不够。

您应该做的第一件事是在ngFor循环中定义trackBy函数。 trackBy函数将对象作为参数，您应该以独特的方式返回标识此资源的内容，例如返回它的ID。

就像那样，Angular不会重新渲染整个列表。

我已经解释了如何确保它不会在此处重新呈现：https://stackoverflow.com/a/42246895/2398593

渲染大型嵌套对象[Angular + Ngrx]

1 个答案: