从离子存储中检索数据后，有没有办法加载 html 页面？

Question

我收到一个错误ERROR TypeError: Cannot read property 'name' of undefined

我有一个从存储中检索数据的服务和一个调用该服务并显示数据的主页。

storage.service.ts

async initilizeData() {
   this.data = await this.storage.get('myData')
}
getData() : MyData {
   return this.data
}

home.page.ts

data: MyData

async ngOnInit() {
   this.storageService.initializeData()
   this.data = this.storageService.getData()
   console.log(this.data)
}

home.page.html

<ion-text>{{data.name}}</ion-text>
<ion-text>{{data.amount}}</ion-text>

ngOnInit() 中的 console.log() 确实为我注销了数据，但在 HTML 页面中 data.name 和 data.amount 似乎都未定义（我知道，当我将 *ngIf="!data == null" 放在代码周围时，错误消失了。）

谢谢大家的回答:)

Answer 1

一种方法是使用ngIf 包装数据，如下所示：

<ng-container *ngIf="data">
  <ion-text>{{ data.name }}</ion-text>
  <ion-text>{{ data.amount }}</ion-text>
</ng-container>

在data 初始化之前不会显示内容。

另一种避免这种情况的方法是使用安全导航运算符，如下所示：

<ion-text>{{ data?.name }}</ion-text>
<ion-text>{{ data?.amount }}</ion-text>

在这种情况下，如果 data 为 null 或未定义，Angular 将不会尝试访问 data.name 和 data.amount。请记住，这种方法仍然会渲染 ion-text 元素，但在初始化 data 之前它们将是空的。