angular - 为什么节目无法读取未定义的属性？

Question

在我的 ionic-Angular 应用程序中，我已经从数据库加载内容并成功打印在控制台上，但我无法绑定(bind) View ，它说 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 尝试渲染 View 时，homeContent 仍然没有定义，然后抛出错误试图访问 about 属性。要解决此问题，请使用 elvis 运算符:

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

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

---

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

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

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

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

public homeContent: any = {};