无法打开"DetailPage"，因为崩溃 离子 5

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 + 'nn'
+ data.body + 'nn'
+ data.location
});
}

无法理解我做错了什么，因为我没有改变懒惰加载路线的方式，但它崩溃了，我试图降级有角度的版本和所有东西，但它仍然存在，我应该从哪里开始发现失败我正在使用制表符和延迟加载。我不得不迁移它，因为这给了我构建时的奇怪行为——prod，但这里的问题是，它在离子卡的循环上点击时崩溃，看起来就像是"；"路线"；或"；detailspage"；

更新：

主页.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属性，但该对象未定义/为null。这可能是因为视图试图显示图像，但对象尚未在组件代码中初始化。

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

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

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