Angular - ngFor复杂可观察量的性能原因

Question

我在Angular 5中编写了一个合同模板构建器。客户端应该能够通过或多或少的简单界面创建/编辑自己的合同模板。合同模板可用于生成合同。

为了使这项工作，我有三个不同的数据流。

1. 模板块 - ＆gt; 合约的一个段落
2. 输入 - ＆gt; 合同的动态内容。
3. 操作 - ＆gt; 他们在静态模板块和动态输入之间存在各种复杂性

三个主要行动是：

1. 显示块 - ＆gt;如果操作的条件匹配，则应显示模板块
2. 显示输入 - ＆gt;输入可以嵌套。因此，当动作的条件匹配时，应显示另一个输入
3. 显示文字 - ＆gt;通过占位符语法，您可以在一个或多个模板块中设置位置以打印一个输入的值。

由于我将这三个流作为最高级别，因此我有一个contract$流作为BehaviorSubject。此contract$流有三个不同的流作为BehaviorSubject：inputs$，templateBlocks$和actions$。

所有操作都将执行到这四个BehaviorSubject之一。这也是API要求数据创建或编辑合同模板的结构。

在此之前，它正在按预期工作......但是为了在合同模板构建器中可视化，我需要另一个数据结构。这就是为什么我创建了两个正在关注inputs$，templateBlocks$和actions$数据的流。

对于输入，我需要嵌套输入。所以我创建了一个流nestedInputs$，它从Observable.combineLatest(this.inputs$, this.actions$)获取数据并循环遍历所有输入，检查输入是否是任何“显示输入”的目标 - 动作，如果是，则创建一个嵌套输入结构。

{
    config: {the original input config object},
    children: [{
        config: {the original input config object},
        children: []
    }]
}

对于模板块，我需要知道哪个模板块受哪个输入的限制，以可视化连接。因此，我合并Observable.combineLatest(this.inputs$, this.templateBlocks$, this.actions$)并循环遍历模板块以通过操作获取连接的输入（如果该模板块有一个）。那么结构是

{
  config: {the original template block config object},
  restrictedBy: {the connected input config object}
}

要使用Froala WYSIWYG Editor更改模板块中的内容。这意味着在每个模板块上我都在创建一个新的编辑器实例。

在合同变大之前，它很有效。在我执行的每个操作上，我在三个主要流inputs$，templateBlocks$和actions$之一上执行（例如，添加新输入，添加嵌套输入，创建新模板块，将输入与模板块连接或将输入占位符添加到模板块）似乎它正在替换三个流中的所有元素，而不仅仅是更改已更改的元素。相反，它再次创建所有DOM元素，这就是为什么对于更大的合同，每次更新需要几秒钟。

我希望我能够解释我的项目以及我遇到的问题。

Angular ngForOf-Loop是否有替换已更改的元素或如何以其他方式改进我的应用程序？