时间戳

首页 > 解决方案 > 由于崩溃 Ionic 5 无法打开“DetailPage”

angular - 由于崩溃 Ionic 5 无法打开“DetailPage”

问题描述

我将所有东西从 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
      });
  }

无法理解我做错了什么，因为没有改变延迟加载路线的方式，但它崩溃了，我正在尝试降级角度版本和所有东西，但它仍然存在，我应该从哪里开始找到失败？我正在使用标签和延迟加载。我不得不迁移它，因为在构建 --prod 时给了我奇怪的行为，但这里的问题是它在单击离子卡循环时崩溃，它看起来与“路线”或“详细信息页面”有关

更新：

主页.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>

标签： angularionic5

解决方案

该错误Cannot read property 'image' of undefined意味着您正在尝试访问该image属性，但该对象未定义/为空。这可能是因为视图试图显示图像但对象尚未在组件的代码中初始化。

为避免该错误，您需要做的第一件事是将视图object.image中的每个实例替换为object?.imageimageobject

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

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

推荐阅读