如何按active值控制slide-toggle选中状态及mat-slide-toggle异常排查

问题1：根据active的1/0控制组件选中状态 #

mat-slide-toggle的checked属性只认布尔值（true/false），所以我们需要把数字类型的active（1/0）转换成布尔值来绑定。这里有两种常用方式：

直接在模板中处理 #

如果是直接绑定到变量，不用表单的话，可以在模板里写判断表达式：

<mat-slide-toggle [checked]="active === 1"></mat-slide-toggle>

这样当active等于1时，组件选中；等于0时则未选中。

结合表单控件使用 #

如果是和FormControl绑定，推荐在TS里把数值转成布尔值后再赋值给控件，避免模板逻辑太复杂：

// 假设从后端获取到的active值是0或1
const fetchedActive = 0; // 示例数据，实际替换成你的接口返回值
this.activeHomeboxPForm.get('active')?.setValue(fetchedActive === 1);

模板里直接绑定表单控件即可：

<mat-slide-toggle formControlName="active"></mat-slide-toggle>

问题2：所有mat-slide-toggle都显示选中的排查与修复 #

从你提供的代码片段来看，最大的可能性是表单控件初始值设置错误，或者接口数据赋值时没有正确转换类型，导致所有组件都保持选中状态。

排查步骤&修复方案 #

1. 检查初始值设置
   你当前的FormControl初始值是true，如果接口数据还没加载完成，组件会先显示初始的选中状态。建议把初始值改成null或者false，等接口数据回来后再赋值：

   this.activeHomeboxPForm = new FormGroup({ 
     'active': new FormControl(null, Validators.required), 
     'homeboxpackage_id': new FormControl('', Validators.required) 
   });
   

2. 修正接口数据的类型转换
   你的populateFormHomeboxP方法里，订阅接口返回数据后，一定要把active的0/1转换成布尔值再赋值给表单。如果直接把数字0赋值给布尔类型的FormControl，可能会出现意料之外的问题：

   populateFormHomeboxP() {
     this.ws.homeboxPGetAll().subscribe(data => {
       // 重点：把数字active转成布尔值
       const isActive = data.active === 1;
       this.activeHomeboxPForm.patchValue({
         active: isActive,
         homeboxpackage_id: data.homeboxpackage_id
       });
       // 如果是处理多个组件的列表，要确保每个item的active都单独转换后绑定
     });
   }
   

3. 检查模板绑定是否重复
   如果是列表中的多个slide-toggle，要确认每个组件绑定的是对应item的active值，而不是同一个全局变量或表单控件。比如用*ngFor循环时，要绑定到当前item的属性：

   <div *ngFor="let package of homeboxPackages">
     <mat-slide-toggle [checked]="package.active === 1"></mat-slide-toggle>
   </div>
   

先试试上面的方案，应该能解决你的问题。

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