объект доступа ionic 3 в виде файла

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 (data);

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}}

Подробнее здесь