Angular: [disabled]="isDisabled()" 是一种正确的方式吗？

Question

我想知道下面的代码在性能方面是否良好。

在HTML中

<button [disabled]="isDisabled()">btn</button>

在ts中（组件）

isDisabled(): boolean {
  //...some loop calculation
  console.log('run isDisabled');
  return result;
}

< p>即使您只是向下滚动Web浏览器，isDisabled方法也会一直执行。

在官方Angular中

属性名称或方法调用应该是规范。

我可以看到允许调用方法，但我觉得这有点浪费，特别是有循环逻辑的情况下。

我能否继续在html中使用[disabled]属性中的方法调用，还是有更好的方法？

谢谢。

- Téwa

---

为什么不在你的逻辑中创建一个变量并将其设置为真或假呢？ - Sachila Ranawaka

方法调用在特殊情况下非常有用，比如基于某些用户输入进行禁用。 - Just code

@SachilaRanawaka 有时禁用的条件可能会很复杂。因此，它必须通过一些过程，例如方法。 - Téwa

@Justcode 我同意方法调用很有用，但如果它存在于HTML中并且具有带有循环的复杂逻辑，我担心可能会出现性能问题。 - Téwa

Answer 1

我建议不要在HTML中使用函数调用，因为该函数会被频繁地调用，正如你所说的那样。在你的情况下，你可以简单地使用管道或布尔标志，在你的组件/服务内设置它们。

管道解决方案可以像这样：

disabled.pipe.ts

@Pipe({name: 'disabled'})
export class DisablePipe implements PipeTransform {
    // Maybe you need additional params
    transform(arr: any[]) {
        // Do you loop over the array
        return result;
    }   

}

在你的HTML中：

<button [disabled]="yourArray | disabled">btn</button>

- Batajus

Answer 2

这个可以，但并不好。 假设您的for循环有500次迭代，在任何变更检测时都可能运行。通常最好的方法是使用Observable API声明依赖值，因为这样您就可以使用async管道。

- CaKa

---

我认为使用Subject可能是解决方法。然而，如果使用Subject，那么每当我需要评估时，我就必须一直调用像my.subject.next(true/false)这样的函数。我的意思是这很有效，但我想知道是否有更好的Rxjs方式。所以，您能否展示给我一个代码示例？ - Téwa