Angular 5 - Ionic 3 无法按键获取对象答案

【问题标题】：Angular 5 - Ionic 3 cannot fetch object by keyAngular 5 - Ionic 3 无法按键获取对象
【发布时间】：2019-07-23 08:51:22
【问题描述】：

我正在使用 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。东西或名字

【问题讨论】：

Angular2: Cannot read property 'name' of undefined的可能重复

标签： javascript angular

【解决方案1】：

尽量不要在模板中访问你的对象，你能在点击按钮上显示值吗？

如果要在模板中访问，请在构造函数中初始化变量，而不是在 ionViewDidLoad 中。您是否尝试将 ionViewDidLoad 替换为 constructor() ？

【讨论】：

不，我没有，但现在我找到了解决方案，我现在将双向工作！

【解决方案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'}
      }
  }
}

【讨论】：