angular - Ionic Angular NgModel 错误引用接口(interface)中的子对象

Question

这是我的界面:

booking.interface.ts

export interface Booking {
  "dateBooking": Date;
  "period": {
    "morning": boolean;
    "afternoon": boolean;
    "night": boolean;
  }
}

addbooking.ts

...
import { Booking } from '../../models/booking/booking.interface';
...
export class AddbookingPage {

  //declare a property of interface type
  public booking = {} as Booking;

   constructor() {
  }
...

当我尝试在 View 中引用 booking.period.morning 或对象期间的任何子属性时，Ionic 引发错误:

addbooking.html

  <ion-item>
    <ion-label>Morning</ion-label>
    <ion-checkbox [(ngModel)]="booking.period.morning"></ion-checkbox> 
  </ion-item>

错误:

TypeError: undefined is not an object (evaluating '_co.booking.period.morning')

我试图实现一个复选框并将数据保存在 Firebase 中。如果有任何其他方法可以实现这一点，我会接受建议。

Answer 1

您需要:

初始化你的对象以匹配你的界面

public booking: Booking = {
  dateBooking: new Date(),
  period: {
   morning: true,
   afternoon: false,
   night: false, 
  }  
}

或隐藏复选框，直到对象具有 period.morning 属性。

<ion-item>
  <ion-label>Morning</ion-label>
  <ion-checkbox *ngIf="booking && booking.period && typeof booking.period.morning === 'boolean'" [(ngModel)]="booking.period.morning"></ion-checkbox> 
</ion-item>