在自定义 ng-template #treeNodeTemplate 中使用 *ngFor 会导致树无限刷新，从而导致浏览器崩溃

Question

将 *ngFor 添加到 ng-template #treeNodeTemplate 会导致树无限刷新。

与 angular-tree-component 相关 Angular 7.

<tree-root [nodes]="data" #tree [options]="customTemplateStringOptions">
  <ng-template #treeNodeTemplate let-node="node" let-index="index">
    <div class='model-tree-item'>
      <div>{{ node.data.getItemText() }}</div> <!-- supposed to get text from object -->

      <!-- This loop runs infinitely, getTestData() returns [1, 2, 3], keeps getting called -->
      <ng-template ngFor [ngForOf]="getTestData()" let-item>
        {{item}}
      </ng-template>
    </div>
  </ng-template>
</tree-root>

用简单的方式尝试过

<div *ngFor="let item of [1, 2, 3]"> (or getTestData(), same result)

这是树选项对象：

  public customTemplateStringOptions: ITreeOptions = {
    // displayField: 'subTitle',
    // isExpandedField: 'expanded',
    idField: 'uuid',
    getChildren: this.getChildren.bind(this),
    nodeHeight: 23,
    allowDrag: (node) => {
      return false;
    },
    allowDrop: (node) => {
      return false;
    }
  }

这里是 getTestData():

getTestData() {
    console.log('test data');
    return [1, 2, 3];
  }

结果：渲染树后的控制台输出

test data
test data
test data
test data
test data
test data
...

此问题已在以下 link 中提出，但由于发帖者未做出回应，因此似乎从未得到解决： Problem Link

Answer 1

我认为问题在于您将函数用作 input 用于属性绑定，例如[ngForOf]="getTestData()"

Angular 尝试检查输入值是否在变化检测周期内发生变化，它期望输入值是模板中的变量，或者属性 22=]。如果它必须调用一个函数来检索值，它会无限期地调用它

尝试将数据设置为 class 上的属性 - 看看是否可以缩小问题范围

注意：这也是为什么 pure pipes 是必要的

Answer 2

除非是对用户操作的响应，否则不要从模板调用方法。你最终进入了一个变化检测循环。

添加一个number[] 属性到组件：

testData: number[];

让组件实现 OnInit 并在 ngOnInit 中设置值。

ngOnInit() {
   this.testData = [1, 2, 3];
}

将模板更改为

<ng-template [ngForOf]="testData" let-item>

在自定义 ng-template #treeNodeTemplate 中使用 *ngFor 会导致树无限刷新，从而导致浏览器崩溃

Using a *ngFor inside a custom ng-template #treeNodeTemplate causes the tree to refresh infinitely, making the browser crash

angular

angular-tree-component