javascript - 无法读取未定义的属性“first_name”

我有这个问题
无法读取未定义的“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;

      })

    })

这是错误的图像

最佳答案

似乎您正在异步加载neworder。
结果，您的页面被呈现，但异步任务尚未完成。
您在构造函数中声明了“ccc>”。
因此，他现在试图在html中读取this.newOrder.billing = {}。
newOrder.billing.first_name是一个空对象，因此那里没有newOrder.billing。
只有当异步任务完成时，这些数据才会存在。但目前角度抛出一个错误之前，可能会发生。
处理这种情况有两种非常常见的方法。
您可以告诉模板，它不应该使用丢失的数据呈现部件

<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=>中没有错误：-）
一旦异步任务完成，变量就不再是未定义的，模板部分将显示出来。
另一种方法（当您只想显示数据时更常见）是使用
first_name
异步管道还将确保angular可以处理该管道。
结合[ngmodel]我认为异步管道不起作用。但这可能值得一试。
热烈的问候