Question

这将在signup.ts

中设置存储中的数据

this.storage.set('signUser',body);

以下将从home.ts中的存储中检索数据

public userDetails: any;

constructor(public navCtrl: NavController, public storage: Storage) {
this.storage.get('signUser').then((data) => {
  this.userDetails = data;
  console.log(data);
});
}

和jSON响应，在console.log（数据）中;

addresses:[]
disable_auto_group_change:0
email:"ader@test.com"
extension_attributes:{is_subscribed: false}
firstname:"adf"
group_id:1
id:20442
lastname:"adf"
store_id:1
updated_at:"2018-05-30 08:40:02"
website_id:1

我可以在控制台中打印JSON，如何访问视图文件中的对象？

我尝试在home.html中访问

{{userDetails.firstname}}

收到错误消息，指出无法读取未定义的“firstname”属性

如何在视图文件中访问它？

Answer 1

问题是由于userDetails在首次呈现视图时仍然是undefined。

确实存在各种解决方案：

您可以简单地在组件中指定一个默认值，这样就不会定义它。

public userDetails: any = {firstname:''};

更简单地说，您可以使用 elvis 运算符?.（如果可用）。

{{userDetails?.firstname}}

使用ngIf可能更明智，因此您可以隐藏显示userDetails值的整个部分。

<div *ngIf="userDetails">....{{userDetails?.firstname}}...</div>

您可以使用async pipe来处理异步调用后设置的值（它订阅Observable或Premise）。

{{yourObservableOrPromise | async}}

查看更多信息here

视图文件中的离子3访问对象

1 个答案: