Angular 5 - Ionic 3 не может получить объект по ключу

Question

Я использую Angular 5 с Ionic 3. Моя основная проблема заключается в том, что я не могу получить второй ключевой объект с именем объекта "myObj".Ниже приведены 2 примера, которые я пробовал до сих пор.

Пример 1

home.ts:

...
export class HomePage {
myObj: any ={};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}

home.html:

...
<p>{{myObj.something.name}}</p>

В этом случае я не могу получить имя, но могу получить

<p>{{myObj.something}}</p>

Почему это так?

Пример 2

home.ts:

...
export class HomePage {
myObj: {something: {value: string, name: string}};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}

home.html:

...
<p>{{myObj.something | json}}</p>

В этом примере я даже не могу получить ключ первого уровня.

Все приведенные выше примеры показываютменя на экране:

cannot read property * of undefined

* зависит от имени свойства ex.что-то или имя

Answer 1

Старайтесь не получать доступ к вашему объекту в шаблоне. Можете ли вы отобразить значения при нажатии кнопки?

Если вы хотите получить доступ к шаблону, инициализируйте переменную в конструкторе, а не в ionViewDidLoad.Вы пытались заменить ionViewDidLoad на constuctor ()?

Answer 2

Попробуйте использовать оператор ?

<p>{{myObj?.something?.name}}</p>

Поскольку myObj не инициализирован с пустым объектом.Если вы инициализируете его следующим образом, оператор ? не нужен.

export class HomePage {
myObj: {something: {value: string, name: string}} = { something: {}};

ionViewDidLoad() {
    this.myObj = {
        something: {value: 'value', name: 'name'}
      }
  }
}