Ionic 5中ngModel绑定数组模型时ion-checkbox同步选中异常问题

• 你当前给所有<ion-checkbox>的[(ngModel)]都绑定了同一个全局变量user_id，复选框的选中状态会自动将绑定变量转为布尔值判断，因此修改任意一个复选框都会同步修改所有组件的选中状态，和预期的「选中对应项存入数组」逻辑不符。
• Ionic的ion-checkbox默认不支持直接将ngModel绑定到数组自动完成id的增删操作，需要手动实现对应逻辑。

方案1：手动控制选中状态（写法最简单，无需引入响应式表单） #

模板代码 #

<!-- 注意你的ngFor循环对象应该是接口返回的用户数组，这里示例命名为userList，避免和单条user变量混淆 -->
<ion-item *ngFor="let user of userList">
  <ion-label>{{ user.name }}</ion-label>
  <ion-checkbox 
    [checked]="user_id.includes(user.id)"
    (ionChange)="toggleSelect(user.id)"
  ></ion-checkbox>
</ion-item>

组件TS代码 #

// 原有变量保持不变
user_id: any[] = []
userList: any[] = [] // 接口返回的用户数组，用于循环渲染

// 新增选中切换方法
toggleSelect(id: any): void {
  const idx = this.user_id.indexOf(id)
  if (idx > -1) {
    this.user_id.splice(idx, 1)
    return
  }
  this.user_id.push(id)
}

方案2：使用响应式表单FormArray（适合表单逻辑复杂的场景） #

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-user-select',
  templateUrl: './user-select.component.html',
  styleUrls: ['./user-select.component.scss'],
})
export class UserSelectComponent implements OnInit {
  userForm: FormGroup
  userList: any[] = [] // 接口返回的用户数组

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      userChecks: this.fb.array([])
    })
    // 模拟接口请求完成后初始化表单
    this.loadUserList()
  }

  loadUserList() {
    // 此处替换为你的接口请求逻辑，拿到userList后执行以下代码
    const checkArray = this.userForm.get('userChecks') as FormArray
    this.userList.forEach(() => {
      checkArray.push(new FormControl(false))
    })
  }

  // 获取选中的用户id数组
  getSelectedIds(): any[] {
    return this.userForm.value.userChecks
      .map((checked: boolean, index: number) => checked ? this.userList[index].id : null)
      .filter(id => id !== null)
  }
}

模板代码 #

<form [formGroup]="userForm">
  <ion-item *ngFor="let user of userList; let i = index">
    <ion-label>{{ user.name }}</ion-label>
    <ion-checkbox [formControlName]="i"></ion-checkbox>
  </ion-item>
</form>

内容的提问来源于stack exchange，提问作者Michel Gisenäel