Angular分页时mat-slide-toggle控件状态异常问题求助

你遇到的核心问题是分页后滑块控件绑定的FormControl重复了。原因很简单：你的FormControl是用整个数据集的循环索引i命名的（比如gps_actived-0、gps_actived-1），但分页后，每页的*ngFor都会重新从0开始计数，导致第二页第一行的滑块会绑定到和首页第一行相同的gps_actived-0控件，自然会复用之前的状态。

解决步骤 #

1. 改用唯一标识命名FormControl

放弃用循环索引i，改用每个GPS条目唯一的gps_id作为FormControl的名称，这样每个条目对应独立的控件，不受分页影响。

修改TS中的populateFormGPS方法：

populateFormGPS() { 
  this.ws.getAllGpss().subscribe( gpss => { 
    this.gpss = gpss;
    console.log(gpss); // all value arrive ok 

    let controls = { 
      'gps_id': new FormControl('', Validators.required) 
    }; 

    // 用gps_id代替循环索引i
    for (const gps of this.gpss) {
      controls[`gps_actived-${gps.gps_id}`] = new FormControl(gps.gps_actived === 1, Validators.required);
    }

    this.acitveGPSForm = new FormGroup(controls); 
    this.patchForm(); 
  }) 
}

2. 调整模板中的控件绑定

将模板里的formControlName从基于当前页的索引i，改为基于条目的gps_id，确保每个滑块绑定到正确的控件：

<mat-slide-toggle 
  formControlName="gps_actived-{{item.gps_id}}" 
  class="example-margin"
  (click)="onActivegps(item.gps_id, item.gps_actived, elem)"
>
</mat-slide-toggle>

3. 移除冗余的[checked]绑定

注意模板里的[checked]="item.gps_actived ===1"可以去掉，因为FormControl已经会根据你初始化时传入的值管理控件状态，手动绑定可能会和FormControl的状态产生冲突。

为什么这样能解决问题？ #

每个GPS条目都有唯一的gps_id，用它作为FormControl的名称后，不管分页到哪一页，当前行的滑块都会绑定到属于自己的那个控件，不会和其他页面的行共享控件，状态自然就不会重复了。

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