Ionic Angular中NgModel引用接口子对象报错问题

嘿，我完全懂你碰到的这个麻烦！你虽然用as Booking给空对象做了类型断言，但实际上这个booking里的period属性根本没被初始化——当视图尝试访问booking.period.morning这类子属性时，period是undefined，所以Ionic才会抛出类似“Cannot read properties of undefined (reading 'morning')”的错误。

下面给你几个靠谱的解决办法：

方法一：初始化时给period赋默认值 #

直接在声明booking属性的时候，把完整的Booking结构都初始化好，确保每个属性都有具体值：

export class AddbookingPage {
  // 初始化完整的Booking结构，给period子属性设置默认值
  public booking: Booking = {
    dateBooking: new Date(),
    period: {
      morning: false,
      afternoon: false,
      night: false
    }
  };
  constructor() { }
  ...
}

方法二：在视图中使用可选链操作符安全访问 #

如果你暂时不想提前初始化完整对象，可以在视图模板里用?.操作符，避免因为属性不存在而报错：

<!-- 示例视图代码 -->
<ion-checkbox [(ngModel)]="booking.period?.morning"></ion-checkbox>
<ion-checkbox [(ngModel)]="booking.period?.afternoon"></ion-checkbox>
<ion-checkbox [(ngModel)]="booking.period?.night"></ion-checkbox>

不过这种方法只是应急的报错规避方案，最好还是配合初始化来用，保证数据结构的完整性。

方法三：在构造函数中初始化period #

如果需要动态设置初始值，也可以在构造函数里给period赋值：

export class AddbookingPage {
  public booking = {} as Booking;
  constructor() { 
    // 初始化period属性，也可以根据业务逻辑设置初始值
    this.booking.period = {
      morning: false,
      afternoon: false,
      night: false
    };
  }
  ...
}

这样处理后，视图再访问booking.period的子属性时，就不会因为period不存在而报错啦！

内容的提问来源于stack exchange，提问作者Joel