Angular 4中Angular Material滑动开关双向绑定异常问题

我碰到过好几个Angular 4项目里mat-slide-toggle双向绑定出问题的情况，结合你的描述，大概率是这几个原因之一，你可以逐一排查：

1. 未正确导入表单相关模块 #

Angular 4里的双向绑定[(ngModel)]依赖FormsModule（模板驱动表单）或者ReactiveFormsModule（响应式表单），如果没在组件所属的模块里导入，绑定逻辑根本不会生效。

解决方法：
打开你的模块文件（比如app.module.ts），在imports数组里添加对应模块，同时别忘了导入滑动开关的Material模块：

import { FormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
  imports: [
    // 其他已导入模块...
    FormsModule,
    MatSlideToggleModule
  ]
})
export class YourModule { }

2. 组件变量未正确声明或初始化 #

如果filteringSchedule在组件里没声明，或者声明了但没初始化，绑定可能会出现异常，始终保持默认的false。

检查组件代码，确保变量正确声明并初始化：

export class YourComponent {
  // 可以根据需求设初始值为true或false
  filteringSchedule: boolean = false;

  // 其他组件逻辑...
}

3. 误用单向绑定代替双向绑定 #

有时候可能不小心写成了单向绑定[ngModel]="filteringSchedule"，这样只会把变量值同步到开关，但开关的状态变化不会反向同步回变量。

确保模板里的代码是标准的双向绑定写法：

<mat-slide-toggle [(ngModel)]="filteringSchedule">
  启用日程过滤
</mat-slide-toggle>

4. 组件内其他逻辑意外重置变量 #

检查组件里的生命周期钩子（比如ngOnInit、ngOnChanges）或者自定义方法，有没有在某个地方把filteringSchedule重新设为false，比如：

ngOnInit() {
  // 不小心在这里重置了变量值
  this.filteringSchedule = false;
}

如果有这种情况，调整逻辑避免不必要的重置操作。

5. Angular Material版本与Angular 4不兼容 #

Angular 4对应的Angular Material版本应该是2.x系列，如果安装的是更高版本（比如3.x及以上），会出现兼容性问题，导致绑定失效。

检查package.json里的依赖版本：

{
  "dependencies": {
    "@angular/material": "^2.0.0-beta.12", // 这个版本适配Angular 4
    "@angular/core": "^4.4.7"
  }
}

如果版本不匹配，卸载现有material包，安装适配的版本：

npm uninstall @angular/material
npm install @angular/material@2.0.0-beta.12 --save

你可以先从第1、2点开始排查，这两个是最常见的问题。

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