在激活[(ngModel)]之前，请等待数据已加载

Question

我在component.html-file中有以下代码，它会触发一个错误：

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

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

我假设[(ngModel)]在被分配值之前尝试读取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文件中的所有其他值都已设置，调用按预期工作。

在[(ngModel)]尝试读取数据之前，我如何确保this.ignoreHolidaysObject已被分配数据？

Answer 1

您可以用一些伪数据实例化ignoreHolidaysObject，以便在异步数据到达之前成功设置绑定，例如

.ts

ignoreHolidaysObject = {
ignoreHolidays: null  // choose a suitable "empty" value for your  use case
}

.html

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

或者你可以简单地阻止组件被渲染，直到你的对象被填充，从而准备好绑定

.html

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

Answer 2

添加*ngIf="ignoreHolidaysObject到垫子滑动切换：

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