Использование метода получения или переменной класса внутри шаблона angular6?

Question

Я хочу вызвать метод Object.keys внутри html углового компонента, чтобы проверить, является ли объект пустым или нет

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

Поскольку «Объект» недоступен внутри шаблона, мы можем достичь этогодвумя способами.

1. Объявление переменной класса со значением в виде функции 'Object.keys' ref

   objectKeys = Object.keys

2. Используйте метод getter, который будет возвращать 'Object.keys' ref

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