Как правильно интерполировать вложенное свойство getter в шаблоне angualr?

Question

Я пытаюсь интерполировать вложенный метод получения свойств в угловой шаблон HTML:

<div class="row">
  <div class="col-xs-12">
    {{ myObject.myProps.someProperty1 }} -- Not working
  </div>
  <div class="col-xs-12">
    {{ myObject.someProperty2 }} -- Working
  </div>
</div>

myObject.myextendedProps - это объект получения объекта, типизированный, но я получаю исключение:

Невозможно прочитать свойство 'someProperty1' из неопределенного

Но я точно знаю, что myProps не равно нулю, потому что когда я веду консоль myObject, я могу нажатьна получателе Invoke свойства три точки свойства myProps он показывает реальное значение.

Моя лучшая догадка, что проблема с получателем свойства.Любое предложение, решающее это?

Answer 1

может использовать оператор Элвиса.Оператор Элвиса позволяет вам проверить наличие объекта перед попыткой доступа к его свойствам в ваших интерполяциях

Пример {{ myObject?.myProps?.someProperty1 }}

Answer 2

Вы можете получить или не получить ошибку в зависимости от того, когда вы инициализируете свои данные.

Если вы инициализируете данные, т.е. myObject до инициализации view , вы не получите сообщение об ошибке. И это не имеет ничего общего с геттером.

так, чтобы оставаться в безопасности при инициализации представления, вы можете использовать оператор безопасной навигации (?) Как этот.

<div class="row">
  <div class="col-xs-12">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

Или вы можете использовать директиву *ngIf, чтобы обеспечить доступ к свойствам myObject только когда определено myObject.

<div class="row" *ngIf="myObject">
  <div class="col-xs-12" *ngIf="myObject.myProps">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

Я создал одну простую демонстрацию stackblitz , чтобы лучше ее понять. Также вы можете прочитать больше о жизненном цикле угловых компонентов здесь https://angular.io/guide/lifecycle-hooks.