Question

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

以html

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

以ts（分量）

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

isDisabled方法始终执行，即使您向下滚动Web浏览器也是如此。

在official Angular

应该以属性名称或方法调用为标准。

我可以看到允许使用调用方法，但是我觉得这特别浪费了循环逻辑。

我可以继续使用html中[disabled]属性中的方法吗，还是有更好的方法？

谢谢。

Answer 1

可以，但是不好。

考虑到在for循环中有500次迭代，可能会进行任何更改检测。通常最好的方法是使用Observable API声明相关值，因为您随后可以使用异步管道。

Answer 2

我不建议在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>

角度：[disabled] =“ isDisabled（）”是正确的方法吗？

2 个答案: