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

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

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

4

2 回答 2

1

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

向组件添加number[]属性：

testData: number[];

让组件实现OnInit并在ngOnInit.

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

将模板更改为

<ng-template [ngForOf]="testData" let-item>
于 2019-05-29T19:08:08.253 回答
0

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

Angular 会尝试检查输入值是否在更改检测周期中发生了更改，并且它希望输入值是模板中的变量或类上的属性。如果它必须调用一个函数来检索值，它只会无限期地调用它

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

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

于 2019-05-29T19:07:11.273 回答