Search code examples
angularionic5

Cannot open "DetailPage" because of crash Ionic 5

i migrated everything from ionic 4 to 5 and everything works but the detailsPage, how to do a proper navigation? I configured my ion-card like this:

<ion-card [routerLink]="['/objects/', object.id]" routerDirection="forward">
....
</ion-card>

// ERROR

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'image' of undefined

// DETAILSPAGE HTML

<ion-img *ngIf="object.image" src="{{ object.image }}"></ion-img>
<ion-img *ngIf="!object.image" src="https://defaultimage.com"></ion-img>

// DETAILSPAGE TS

ngOnInit() {
console.log("Into ngoninit")
this.objectId = this.route.snapshot.paramMap.get('id')
this.objectRef = this.af.doc(`objects/${this.objectId}`);
console.log(this.objectRef , this.objectId)

if (this.objectId) {
  this.loadobject(this.objectId)
}
this.gotClicked()
}

async loadObject(objectId) {
    console.log("into loadobject", objectId)
    this.af.collection<object>('objects')
      .doc<object>(objectId)
      .valueChanges()
      .subscribe(data => {
        this.object = data
        console.log(data)
        this.fullObject = data.title + ' by '
          + data.name + '\n\n'
          + data.body + '\n\n'
          + data.location
      });
  }

Cannot understand what im doing wrong because didnt change the way to do lazy loading routes but it crashes, i'm trying to downgrade angular versions and everything but it still remains, where should I start to find the fail? I'm using tabs and lazy loading. I had to migrate it because giving me strange behaviour on build --prod, but here the problem is It crashes at click on a loop of ion-cards and it looks it's something about "routes" or "detailspage"

UPDATED:

MAINPAGE.HTML

<div *ngFor="let object of objects | async">
    <ion-card [routerLink]="['/object/', object.id]" routerDirection="forward">
        <ion-img class="blur-filter" src="{{ object.image }}"></ion-img>
        <ion-card-header>
            <ion-card-title>
                <ion-grid>
                    <ion-row>
                        <ion-col>
                            <div class="ion-text-start">
                                {{ object.title }}
                            </div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <ion-grid>
                <ion-row class="ion-justify-content-start">
                    <ion-col size='3'>
                        <ion-icon name="eye"></ion-icon>
                        <ion-badge color="secondary">{{ object.clicks }}</ion-badge>
                    </ion-col>
                    <ion-col size='3'>
                    </ion-col>
                    <!--ion-col>

                    </ion-col-->
                </ion-row>
                <ion-row>
                    <ion-col>
                      
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-card-content>
    </ion-card>
</div>
Solution

  • The error Cannot read property 'image' of undefined means that you're trying to access the image property but that object is undefined/null. This could be happening because the view is trying to show the image but the object has not been initialized yet in the component's code.

    The first thing you'd need to do to avoid that error is to replace every instance of object.image in the view by object?.image so that Angular doesn't try to access the image property if the object is still null/undefined.

    Another suggestion – it's better to use [src]="..." instead of src={{ ... }}. So in that case your code would look like this:

    <ion-img *ngIf="object?.image" [src]="object.image"></ion-img>
<ion-img *ngIf="!object?.image" src="https://defaultimage.com"></ion-img>```