时间戳

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

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

问题描述

与 Angular 7 的 angular-tree-component 相关。

<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
...

此问题已在以下链接中打开，但由于发布者未回复，因此似乎从未解决： 问题链接

标签： angularangular-tree-component

解决方案

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

向组件添加number[]属性：

testData: number[];

让组件实现OnInit并在ngOnInit.

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

将模板更改为

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

推荐阅读