why shows cannot read property undefined?

Question

In my ionic-Angular application,I have load the content from the db and successfully printed on console, but I cannot bind with view, it says 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) 

 })
}

My console

Answer 1

The problem is that the homeContent property is loaded async, so when Angular tries to render the view, homeContent is still not defined, and then an error is thrown when trying to access to the about property. To fix this, use the elvis operator:

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

This will tell Angular not to try to read the about property if the homeContent is still null/undefined

---

Some other ways to prevent this from happening would be to add a check with ngIf like this:

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

In this case we don't need the elvis operator (?) since the entire ion-card-content won't be rendered if the homeContent property is no defined.

Another possible way to avoid this error, would be to initialize the homeContent property as an object, so when trying to access to its about sub-property, it will be null but Angular won't throw an error:

public homeContent: any = {};