typescript - Ionic Angular NgModel hatası: arayüzde bir alt nesneye referans vermek

Bu benim arayüzüm:

rezervasyon.arayüz.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() {
  }
...

Görünümde booking.period.morning öğesine veya period nesnemin herhangi bir alt özelliğine başvurmaya çalıştığımda, Ionic bir hata verir:

addbooking.html

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

Hata :

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

Bir onay kutusu uygulamaya çalışıyorum ve verileri Firebase'de kaydetmek istiyorum. Bunu başarmanın başka bir yolu varsa önerilere açığım.

Cevap #1

Ya şunu yapmanız gerekiyor:

Nesnenizi arayüzünüzle eşleşecek şekilde başlatın

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

veya nesne period.morning özelliğine sahip olana kadar onay kutusunu gizle.

<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>