为什么显示不能读取属性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仍未定义，然后在尝试访问{时抛出错误{1}}财产。要解决此问题，请使用 elvis运算符：

about

如果 <ion-card-content> {{ homeContent?.about }} </ion-card-content> 仍为about / homeContent

，这将告诉Angular不要尝试阅读null属性

阻止这种情况发生的其他一些方法是添加undefined这样的支票：

ngIf

在这种情况下，我们不需要elvis运算符（？），因为如果 <ion-card-content *ngIf="homeContent"> {{ homeContent.about }} </ion-card-content> 属性没有定义，则整个ion-card-content将被渲染。

避免此错误的另一种可能方法是将homeContent属性初始化为对象，因此在尝试访问其homeContent子属性时，它将为null但Angular赢了＆＃ 39; t抛出错误：

about