Не удается прочитать свойство 'first_name' из неопределенного - PullRequest
Новая
       18

Не удается прочитать свойство 'first_name' из неопределенного

0 голосов
/ 05 сентября 2018

У меня есть этот вопрос

Невозможно прочитать свойство 'first_name' из неопределенного

Это мой HTML-файл checkout.html 

<ion-content>
      <ion-item>
        <ion-label>First Name</ion-label>
        <ion-input type="text" [(ngModel)]="newOrder.billing.first_name"></ion-input>
      </ion-item>
      
      ....
      
</ion-content>

а это мой ts файл checkout.ts 

      this.storage.get("userLoginInfo").then((userLoginInfo) => {

      this.userInfo = userLoginInfo.user;

      let email = userLoginInfo.user.email;
      let id = userLoginInfo.user.id;

      this.WooCommerce.getAsync("customers/email/"+email).then((data) => {

        this.newOrder = JSON.parse(data.body).customer;

      })

    })

и это изображение ошибки enter image description here

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Кажется, что вы загружаете newOrder асинхронно. В результате ваша страница будет обработана, но асинхронная задача еще не завершена.

Вы написали, что объявили this.newOrder.billing = {} в конструкторе. Из-за этого он теперь пытается прочитать newOrder.billing.first_name в вашем html. newOrder.billing - пустой объект, поэтому first_name там нет.

Только после завершения асинхронной задачи эти данные будут существовать. Но в настоящее время Angular выдает ошибку до того, как это может произойти.

Есть два очень распространенных способа справиться с подобной ситуацией.

Вы можете сказать шаблону, что он НЕ должен отображать деталь с отсутствующими данными 

<ion-item *ngIf="newOrder.billing">
  <ion-label>First Name</ion-label>
  <ion-input type="text" [(ngModel)]="newOrder.billing.first_name"></ion-input>
</ion-item>

Тогда * ngIf увидит, что переменная не определена и эта часть шаблона не будет отображаться в DOM => без ошибок :-) Как только асинхронная задача завершится, переменная больше не будет неопределенной, и будет показана часть шаблона.

Другой способ (более распространенный, когда вы просто хотите показать данные) использует {{ newOrder.billing.first_name | async }} Асинхронный канал также гарантирует, что Angular справится с этим. В сочетании с [ngModel] я думаю, что асинхронный канал не будет работать. Но, возможно, стоит попробовать.

С уважением

0 голосов
/ 05 сентября 2018

Просто добавьте кавычку, думаю, это поможет. 

<ion-input type="text" [(ngModel)]="newOrder?.billing.first_name"></ion-input>
...