在 angular6 模板中使用 getter 方法或 class 变量？

Question

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

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

由于'Object'在模板内部不可访问，我们可以通过两种方式实现。

声明 class 变量，其值为 'Object.keys' 函数引用

objectKeys = Object.keys
使用 getter 方法将 return 'Object.keys' ref

获取 objectKeys() { return 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) : [];
    }
}

在 angular6 模板中使用 getter 方法或 class 变量？

Use of getter method or class variable inside angular6 template?

javascript

performance

typescript

angular2-changedetection

angular