为什么显示不能读取属性 undefined？-Java 学习之路

在我的 ionic-Angular 应用程序中，我已经从数据库加载内容并成功打印在控制台上，但是我无法与视图绑定，它说

_ _ 3

<ion-card-content>
  {{homeContent.about}}
  </ion-card-content>

component.ts

constructor(public navCtrl: NavController, navParams: NavParams, public 
   homeService: HomeContentService, 
  public loadingCtrl: LoadingController) {
 this.homeService.geteventHomeContentForPage(this.event.id).subscribe(data=>
 { 
  this.homeContent=data;

  console.log(this.homeContent) 
  console.log(this.homeContent.about) 

 })
}

我的控制台
输出控制台

1 回答

4
问题是homeContent属性是异步加载的，所以当 Angular 尝试渲染视图时，仍然没有定义homeContent，然后在尝试访问about属性时抛出错误。要解决此问题，请使用elvis 运算符：
```
<ion-card-content>
    {{ homeContent?.about }}
  </ion-card-content>
```
如果homeContent仍然是null/undefined，这将告诉 Angular 不要尝试读取about属性

防止这种情况发生的其他一些方法是使用ngIf添加一个检查，如下所示：
```
<ion-card-content *ngIf="homeContent">
    {{ homeContent.about }}
  </ion-card-content>
```
在这种情况下，我们不需要 elvis 运算符(？)，因为如果没有定义homeContent属性，则不会呈现整个ion-card-content。

避免此错误的另一种可能方法是将homeContent属性初始化为对象，因此在尝试访问其about sub-property 时，它将为 null 但 Angular 不会抛出错误：
```
public homeContent: any = {};
```
回复于 2024-04-25T23:14:51+08:00

为什么显示不能读取属性 undefined？

1 回答

相关问题