为什么显示不能读取属性undefined？

Question

在我的ionic-Angular应用程序中,我已经从db加载内容并成功打印在控制台上,但是我无法与视图绑定,它说 app.html

  <ion-card-content>
  {{homeContent.about}}
  </ion-card-content>

component.ts

constructor(public navCtrl: NavController, navParams: NavParams, public 
   homeService: HomeContentService, 
  public loadingCtrl: LoadingController) {
 this.homeService.geteventHomeContentForPage(this.event.id).subscribe(data=>
 { 
  this.homeContent=data;

  console.log(this.homeContent) 
  console.log(this.homeContent.about) 

 })
}

我的控制台

Answer 1

问题是该homeContent属性是异步加载的,因此当Angular尝试呈现视图时,homeContent仍然没有定义,然后在尝试访问该about属性时会引发错误.要解决此问题,请使用elvis运算符:

  <ion-card-content>
    {{ homeContent?.about }}
  </ion-card-content>

这将告诉Angular about如果homeContent仍然是null/ 不尝试读取属性undefined

防止这种情况发生的其他一些方法是添加如下的检查ngIf:

  <ion-card-content *ngIf="homeContent">
    {{ homeContent.about }}
  </ion-card-content>

在这种情况下,我们不需要elvis运算符(？),因为ion-card-content如果homeContent未定义属性,则不会呈现整个运算符.

避免此错误的另一种可能方法是将homeContent属性初始化为对象,因此在尝试访问其about子属性时,它将为null但Angular不会抛出错误:

public homeContent: any = {};