如何确保[(ngModel)]在ignoreHolidaysObject加载完成后再激活？

在component.html中编写如下代码后触发错误：

<mat-slide-toggle [(ngModel)]="ignoreHolidaysObject.ignoreHolidays">
    Ignore holidays
</mat-slide-toggle>

错误信息：

TypeError: Cannot read properties of undefined (reading 'ignoreHolidays')

推测原因：[(ngModel)]在ignoreHolidaysObject通过异步请求完成赋值前，就尝试读取其ignoreHolidays属性。

component.ts的ngOnInit方法代码：

ngOnInit(): void {
    this.subs.add(this._ignoreHolidaysService.getIgnoreHolidaysResult() //subs is subsink
      .subscribe((__ignoreHolidaysObject: IgnoreHolidaysViewModel) => {
        this.ignoreHolidaysObject = __ignoreHolidaysObject;
      },
      (error: HttpErrorResponse) => {
        console.log("Call threw an error", error);
      })
    )
  }

已确认：接口调用符合预期，HTML中其他值均正常设置，需确保ignoreHolidaysObject完成赋值后，[(ngModel)]才读取其属性。

方法1：使用安全导航操作符（?.） #

直接在模板中添加安全导航操作符，避免访问未定义对象的属性：

<mat-slide-toggle [(ngModel)]="ignoreHolidaysObject?.ignoreHolidays">
    Ignore holidays
</mat-slide-toggle>

当ignoreHolidaysObject为undefined或null时，操作符会终止属性访问，不会抛出错误；对象赋值完成后，绑定会自动生效。

方法2：用*ngIf延迟渲染组件 #

通过*ngIf判断对象是否存在，仅当ignoreHolidaysObject被赋值后才渲染组件：

<mat-slide-toggle *ngIf="ignoreHolidaysObject" [(ngModel)]="ignoreHolidaysObject.ignoreHolidays">
    Ignore holidays
</mat-slide-toggle>

这种方式会完全避免对象未定义时的渲染，适合要求对象完全初始化后再显示的场景。

方法3：提前初始化对象默认值 #

在组件类中提前为ignoreHolidaysObject设置符合IgnoreHolidaysViewModel结构的默认值：

// 组件类属性定义
ignoreHolidaysObject: IgnoreHolidaysViewModel = { ignoreHolidays: false }; // 根据实际接口结构调整默认值

ngOnInit(): void {
    // 原有异步请求代码保持不变
}

模板初始化时就能访问到有效对象，不会抛出错误，异步请求返回后会自动覆盖默认值更新视图。

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