由于 Ionic 5 崩溃，无法打开 "DetailPage"

Question

我将所有内容从 ionic 4 迁移到 5，一切正常，但 detailsPage 除外，如何进行正确的导航？我这样配置我的离子卡：

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

// 错误

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

// 详细信息HTML

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

// 详细信息 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
      });
  }

无法理解我做错了什么因为没有改变延迟加载路线的方式但是它崩溃了，我正在尝试降级 angular 版本和所有但它仍然存在，我应该从哪里开始找到失败？ 我正在使用选项卡和延迟加载。我不得不迁移它，因为在 build --prod 上给我带来了奇怪的行为，但这里的问题是它在点击离子卡循环时崩溃，它看起来与“路由”或“detailspage”有关

更新：

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>

Answer 1

错误 Cannot read property 'image' of undefined 表示您正在尝试访问 image 属性但该对象是 undefined/null。发生这种情况的原因可能是视图试图显示图像，但对象尚未在组件代码中初始化。

要避免该错误，您需要做的第一件事是将视图中 object.image 的每个实例替换为 object?.image，这样 Angular 就不会尝试如果 object 仍然是 null/undefined，则访问 image 属性。

另一个建议 – 最好使用 [src]="..." 而不是 src={{ ... }}。所以在那种情况下，您的代码将如下所示：

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

由于 Ionic 5 崩溃，无法打开 "DetailPage"

Cannot open "DetailPage" because of crash Ionic 5

angular

ionic5