Как исправить ошибку '_co.x is undefined' в Angular?

Question

У меня есть форма, которая отправляет данные в базу данных. Но у меня проблемы с вложенными объектами JSON.

Я пробовал оператор *ngIf в соответствии с предложением Angular 5 - остановка ошибок из неопределенного объекта перед загрузкой данных . Предполагается, что представление обновляется после определения объекта, однако оно никогда не обновляется. Так что в моем коде должна быть ошибка.

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

Простой способ преодолеть неопределенное свойство в объекте - создать пустой объект клиента, используя 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)
      }
    )
}

Answer 2

try: * ngIf = "customer.contactDetails | async" и дайте мне знать, работает ли он или нет?

Answer 3

Вместо этого используйте ваше условие -

*ngIf="customer?.contactDetails"