Question

我想在角度组件的html内调用Object.keys方法，以检查对象是否为空

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

由于无法在模板内部访问“对象”，因此我们可以通过两种方式实现这一目标。

将类变量声明为“ Object.keys”函数ref

objectKeys = Object.keys
使用getter方法将返回“ Object.keys”引用

get objectKeys（）{ 返回Object.keys; }

最终代码是

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

我知道，即使我使用任何一种方法，角度的变化检测系统也会多次调用该函数以了解评估状态。第二种方法经常执行两种方法调用，一种方法是获取Object.keys引用，另一种方法是评估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方法或类变量？

1 个答案: