Ionic 6 ionViewWillEnter cannot read property 0 of undefined

Ionic Framework Ionic Angular
1

My Environemtn

node: v14.15.5
npm: 6.14.11
angular: 11.2.0
ionic: 6.13.1

I am learning ionic. So i have added data to an array declared in a service. When i go back to the lists page, ngOnInit will not execute if i have been to that page before. To load the data i need to use ionViewWillEnter or ionViewDidEnter. However, when i move the function call to the ionViewWillEnter i get the following error:

ERROR TypeError: Cannot read property '0' of undefined
    at DiscoverPage_Template (template.html:39)
    at executeTemplate (core.js:9544)
    at refreshView (core.js:9413)
    at refreshComponent (core.js:10579)
    at refreshChildComponents (core.js:9210)
    at refreshView (core.js:9463)
    at refreshEmbeddedViews (core.js:10533)
    at refreshView (core.js:9437)
    at refreshComponent (core.js:10579)
    at refreshChildComponents (core.js:9210)

The only way i can get rid of the above error is by calling the function in both ngOnInIt and ionViewWillEnter .

loadedPlaces: Place[];
  listedLoadedPlaces: Place[]; //for virtual scroll

  constructor(private placesService: PlacesService, private menuCntrl: MenuController) { }

  ngOnInit() {
    console.log('ngOnInIt');
    this.loadData();
  }

  ionViewWillEnter(){
    console.log('ionViewWillEnter');
    this.loadData();
  }

  loadData(){
    this.loadedPlaces = this.placesService.places; //getter property
    //for the virtual scroll
    this.listedLoadedPlaces = this.loadedPlaces.slice(1);
  }

I have also tried declaring an empty array and then removing the function call from ngOnInit. In this case i get following issue:

core.js:6157 ERROR TypeError: Cannot read property 'title' of undefined
    at DiscoverPage_Template (template.html:39)
    at executeTemplate (core.js:9544)
    at refreshView (core.js:9413)
    at refreshComponent (core.js:10579)
    at refreshChildComponents (core.js:9210)
    at refreshView (core.js:9463)
    at refreshEmbeddedViews (core.js:10533)
    at refreshView (core.js:9437)
    at refreshComponent (core.js:10579)
    at refreshChildComponents (core.js:9210)

How can i solve this issue?

2

Checking for the null (?) and declaring an empty array helped fix the issue:

loadedPlaces[0]?.title

3

IMHO, a better idea would be to initialize loadedPlaces to an empty array. This should not be the template’s responsibility.

4

The solution needed both, declaring an empty array and also checking for null.