Angular2 *ngIf ="afunctioncall()"导致函数被调用 9 次

Question

我正在使用 Angular2 并希望元素根据函数调用的结果有条件地显示。

当我这样做时，我注意到该函数被调用了多次。

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello</h1>
    <div *ngIf="returnsTrue()">
       <h1>World</h1>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }

    returnsTrue(): boolean {
        console.log('Returning true');
        return true;
    }
}

查看相关的plnkr:

http://plnkr.co/edit/MScwD3LaIj9YfBlwWltw?p=preview

'Returning true' console.log 输出了 4 次。

谁能告诉我为什么会发生这种情况？

有什么办法可以避免吗？

我看过以下帖子，但它与 Angular 1 相关，并且为 Angular2 重写了摘要周期，我不确定它是否相关:

ng-if being called more times than it should

Answer 1

我怀疑你的函数在每个变化检测周期都会被调用，特别是在开发模式下，当 Angular 多次检查 *ngIf 中的表达式是否发生变化时，这样做就是调用函数.

避免它的一种方法是更改​​函数中的类变量，并在 *ngIf 中监视该变量:

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello</h1>
    <div *ngIf="isTrue">
       <h1>World</h1>
    </div>
  `,
})
export class App {
  name:string;
  isTrue:boolean = false;
  constructor() {
    this.name = 'Angular2'

    setTimeout(() => {
      this.returnsTrue();
    }, 5000);

  }

    returnsTrue(): boolean {
        console.log('Returning true');
        this.isTrue = true;
    }
}

我adapted your Plunker来展示这一点。