Почему необходимо написать Object = Object в Component, чтобы получить Object.keys в Angular?

Question

В моем угловом шаблоне мне нужно количество ключей объекта. Я писал {{ Object.keys(myObj).length }} в файле шаблона. Но выдает ошибку: ERROR TypeError: Cannot read property 'keys' of undefined.

Затем из Интернета я получил предложение, поэтому я написал Object = Object в моем компоненте, и это сработало.

1. Я не понимаю, в чем заключается философия.
2. Как другие выражения и выражения в фигурных скобках работают в шаблоне Angular?

Answer 1

Контекст выражения шаблона обычно ограничен самим экземпляром компонента. Поэтому, когда вы интерполируете переменную внутри {{}}, она по существу будет искать подходящее свойство базового экземпляра компонента или ссылочной переменной шаблона.

Когда вы делаете Object = Object в компоненте, вы фактически создаете свойство Object компонента, которое ссылается на глобальный Object, на который ссылается компонент.

Но то же самое невозможно внутри выражения шаблона, оно не имеет никакого доступа к глобальным свойствам, кроме undefined.

Эта часть документов объясняет это:

Шаблонные выражения не могут ссылаться на что-либо в глобальном пространстве имен, кроме неопределенного. Они не могут ссылаться на окно или документ. Кроме того, они не могут вызывать console.log () или Math.max (), и они ограничено ссылками на члены контекста выражения.

Answer 2

Все, что вы отображаете в шаблонах, должно быть частью сопонента, это действительно помогает с инкапсуляцией, помогает предотвратить будущие ошибки, неожиданное поведение и облегчает отладочные задачи. С другой стороны, немного дальше от темы, избегайте использованияметоды внутри {{}}, так как они действуют как нечистые каналы и запускаются несколько раз при каждом взаимодействии пользователя с DOM, лучше сохранить результат функции или метода в свойстве в component.ts и в этом свойствеэто тот, который вы показываете