Angular 5中mat-slide-toggle无法按0/1值显示选中状态求助

你遇到的问题核心是数据类型不匹配——mat-slide-toggle组件默认依赖布尔值（true/false）来识别选中/未选中状态，但你的this.device存储的是数字类型的1/0，组件没法直接把数字对应到正确的开关状态。下面给你两种实用的解决思路：

思路1：模板内直接处理值转换 #

这种方式适合简单场景，不用修改太多TS代码，直接在模板里完成数字到布尔值的映射：

<mat-slide-toggle 
  [checked]="device === 1"
  (change)="device = $event.checked ? 1 : 0">
  设备状态
</mat-slide-toggle>

• [checked]="device === 1"：明确告诉组件，当device等于1时显示选中状态，否则显示未选中
• (change)="device = $event.checked ? 1 : 0"：当开关状态改变时，把组件返回的布尔值转回数字1/0，同步更新device的值

思路2：用Getter/Setter封装状态（更优雅的扩展方式） #

如果需要在状态变化时添加额外逻辑（比如调用API保存设备状态），推荐在TS里用getter和setter封装一个布尔类型的active属性，再绑定到组件上：

TS代码： #

export class YourComponent {
  // 假设你的device初始值或从接口获取的是数字1/0
  device: number = 1;

  // 封装布尔类型的active属性，作为组件的绑定入口
  get active(): boolean {
    // 把数字1转为true，0转为false
    return this.device === 1;
  }

  set active(isActive: boolean) {
    // 把布尔值转回数字1/0，同步到device
    this.device = isActive ? 1 : 0;
    // 这里可以添加状态变更后的逻辑，比如调用接口更新设备状态
    // this.updateDeviceStatus(this.device);
  }
}

HTML代码： #

<mat-slide-toggle [(ngModel)]="active">
  设备状态
</mat-slide-toggle>

这种方式既保留了device的数字类型，又让mat-slide-toggle能正确识别状态，同时方便后续扩展业务逻辑。

额外检查点 #

• 确认this.device的值确实是1或0，没有出现undefined、null或其他异常值
• 如果device是异步获取的（比如从API请求），确保数据加载完成后再渲染组件，避免初始状态异常

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