Question

我有一个将数据发送到数据库的表格。但是我在嵌套JSON对象方面遇到了麻烦。

我已经尝试过Angular 5 - Stop errors from undefined object before loading data建议的*ngIf语句。该视图应该在定义了对象后立即更新，但是永远不会更新。因此，我的代码一定存在错误。

customer.ts （模型）

export class Customer {
  public name: string
  public contactDetails:
  {
    phone: number,
    email: string
  }
}

customer.component.ts

private customer: Customer;

constructor(private customerService: CustomerService) { }

ngOnInit() {
}

createCustomer()
{
    this.customerService.postCustomer(this.customer).subscribe
    (
      data=>
      {
        console.log(data)
      },
      error=>
      {
        console.log(error)
      }
    )
}

customer.component.html

<div class="form-group">
  <label>Name</label>
  <input type="text" name="name" [(ngModel)]="customer.name" class="form-control">
</div>

<div class="form-group" *ngIf="customer.contactDetails">
  <label>Phone number</label>
  <input type="text" name="phone" class="form-control" [(ngModel)]="customer.contactDetails.phone">
</div>

仅name输入有效。如果使用*ngIf="customer"，则会收到错误_co.customer.contactDetails is undefined。

Answer 1

try：* ngIf =“ customer.contactDetails | async”，让我知道它是否有效？

Answer 2

改为使用您的条件-

*ngIf="customer?.contactDetails"

Answer 3

克服对象中未定义属性的简单方法是使用new Customer()

创建空的客户对象

customer.component.ts

  private customer: Customer = new Customer();

constructor(private customerService: CustomerService) { }

ngOnInit() {
}

createCustomer()
{
    this.customerService.postCustomer(this.customer).subscribe
    (
      data=>
      {
        console.log(data)
      },
      error=>
      {
        console.log(error)
      }
    )
}

如何修复Angular中的'_co.x is undefined'错误？

3 个答案: