javascript - 在 angular6 模板中使用 getter 方法或类变量？

Question

我想在 Angular 组件的 html 中调用 Object.keys 方法来检查对象是否为空

*ngIf = "Object.keys(dataToBeChecked).length === 0"

由于“对象”在模板内部不可访问，我们可以通过两种方式实现这一点。

1. 将值声明为“Object.keys”函数引用的类变量

   objectKeys = Object.keys

2. 使用返回 'Object.keys' ref 的 getter 方法

   获取对象键(){ 返回 Object.keys；

最终代码为

*ngIf = "objectKeys(dataToBeChecked).length === 0"

我知道，即使我使用任何一种方法，angular 的变化检测系统都会多次调用该函数以了解评估状态。第二种方法经常调用两个方法，一个是获取 Object.keys ref，另一个是评估 Object.keys。那么，哪种方式更好地实现这一目标呢？使用第一种方法是否比第二种方法有任何性能改进？

Answer 1

您可以使用支持变化检测的keyValue 管道。所以它只会在输入值改变时执行。

*ngIf = "(dataToBeChecked | keyValue).length === 0"

文档:https://angular.io/api/common/KeyValuePipe

更新:

正如评论中指出的那样。 keyValue 管道不是纯粹的，这意味着即使值没有改变它也会被执行。

您可以改用此自定义管道。

@Pipe({name: 'objectKeys', pure: true})
export class ObjectKeysPipe implements PipeTransform {
    public transform(value: any): any {
        return typeof value === 'object' ? Object.keys(value) : [];
    }
}