Angular中mat-slide-toggle默认状态与样式不符问题求助

问题现象 #

使用mat-slide-toggle时，组件默认声明skipNotification: boolean = false，但开关显示INACTIVE文本的同时，滑块颜色处于激活状态，期望非激活时显示灰色、激活时显示绿色。

现有代码 #

组件代码 #

skipNotification: boolean = false;

模板代码 #

<mat-slide-toggle [check]="job['notifications'][0]['skipNotification']== true"
                  formControlName="skipNotification"
                  (change)="job['notifications'][0]['skipNotification'] = !job['notifications'][0]['skipNotification']">
  {{job['notifications'][0]['skipNotification'] == true ? 'ACTIVE' : 'INACTIVE'}}
</mat-slide-toggle>

错误原因 #

1. 属性拼写错误：mat-slide-toggle的选中状态绑定属性是[checked]，而非[check]，错误的属性名导致该绑定无效，滑块状态实际由表单控件控制。
2. 状态管理冲突：同时使用formControlName（表单驱动）和手动修改job变量、绑定change事件，导致表单控件值与job变量值不同步，出现文本显示与滑块样式不匹配的情况。
3. 变量未联动：组件中声明的skipNotification未与模板中的job['notifications'][0]['skipNotification']关联，初始值未同步到表单控件或job对象。

修复方案 #

方案1：统一使用Reactive Forms驱动状态 #

移除手动绑定和事件，通过表单控件管理滑块状态并同步到job对象：

组件代码

import { FormGroup, FormBuilder } from '@angular/forms';

job: any;
notificationForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 初始化表单，同步job中的初始值
  this.notificationForm = this.fb.group({
    skipNotification: [this.job?.notifications?.[0]?.skipNotification || false]
  });

  // 监听表单值变化，同步更新job对象
  this.notificationForm.get('skipNotification')?.valueChanges.subscribe(value => {
    if (this.job?.notifications?.[0]) {
      this.job.notifications[0].skipNotification = value;
    }
  });
}

模板代码

<mat-slide-toggle formControlName="skipNotification">
  {{ notificationForm.get('skipNotification')?.value ? 'ACTIVE' : 'INACTIVE' }}
</mat-slide-toggle>

方案2：直接绑定状态（不使用表单控件） #

如果不需要表单驱动，修正属性拼写并统一状态逻辑：

<mat-slide-toggle [checked]="job.notifications[0].skipNotification"
                  (change)="job.notifications[0].skipNotification = $event.checked">
  {{ job.notifications[0].skipNotification ? 'ACTIVE' : 'INACTIVE' }}
</mat-slide-toggle>

注意：需确保job.notifications[0]已初始化，避免空指针错误

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