angular - *ngIf 中的 Angular 6 变量或方法绑定

Question

在模板 *ngIf 中绑定变量和绑定方法有什么区别。

前任：

情况1：

<div *ngIf="myVar">ABC</div>

案例二：

<div *ngIf="myFunction()">ABC</div>

myFunction() : boolean {
   if (cond1 && cond2 && cond3) {
       return true;
   } else { 
       return false;
   }
}

对性能有影响吗？

我正在尝试使用第 2 种情况，获取范围错误：超过最大调用堆栈。

帮我解决这个问题？谢谢

Answer 1

就在这里

第一个不会有任何性能问题，因为您直接检查变量，而第二个将有，因为角度使用更改检测并且它会触发多次

Answer 2

当你调用一个函数时，每次都会触发变化检测周期。最好使用 get 属性

<div *ngIf="myvar">ABC</div>

get myvar() : boolean {
  if (cond1 && cond2 && cond3) {
    return true;
  } 
  return false;
}

Answer 3

您可以做些什么来避免性能问题是您可以创建一个类变量

公共 myVar = cond1 && cond2 && cond3

然后您可以在第一个选项中使用它并保持代码的可读性