Angular+Ionic复选框选中值返回undefined，无法校验选中项求助

我来帮你排查下问题，你现在遇到的复选框选中状态无法正确获取、选中项数组操作错误的问题，主要有几个关键问题需要修正：

1. ionChange事件参数传递错误 #

你当前的(ionChange)只传入了phone.id，但方法定义里第二个参数是isChecked，这就导致这个参数一直是undefined。另外，ionChange事件本身会返回包含选中状态的事件对象，或者你也可以直接利用双向绑定的ngModel值。

2. 数组索引获取方式错误 #

你用let index = this.selectedArray(data)来获取索引是完全错误的，数组不是函数，不能这样调用，应该用findIndex或者indexOf来找到元素的位置。

3. 未处理重复添加/重复删除的情况 #

如果用户多次点击同一个复选框，可能会导致数组里出现重复的ID，或者删除不存在的元素报错，需要做判断。

方案一：利用双向绑定的ngModel值（更简洁） #

修改HTML代码，把整个phone对象传入方法：

<div *ngIf="phones.length > 0">
  <ion-item *ngFor="let phone of phones">
    <ion-label>{{phone.name}}</ion-label>
    <ion-checkbox color="dark" (ionChange)="selectMember(phone)" [(ngModel)]="phone.isChecked"></ion-checkbox>
  </ion-item>
</div>

修改TS脚本代码：

selectedArray: any[] = []; // 选中项的ID数组

selectMember(phone: any) {
  const phoneId = phone.id;
  const isChecked = phone.isChecked;

  if (isChecked) {
    // 避免重复添加同一个ID
    if (!this.selectedArray.some(id => id === phoneId)) {
      this.selectedArray.push(phoneId);
    }
  } else {
    // 找到元素索引后删除
    const index = this.selectedArray.findIndex(id => id === phoneId);
    if (index !== -1) {
      this.selectedArray.splice(index, 1);
    }
  }
  console.log(this.selectedArray);
}

方案二：直接从ionChange事件中获取选中状态 #

如果你不想传递整个phone对象，也可以通过事件对象获取选中状态：
修改HTML代码：

<div *ngIf="phones.length > 0">
  <ion-item *ngFor="let phone of phones">
    <ion-label>{{phone.name}}</ion-label>
    <ion-checkbox color="dark" (ionChange)="selectMember(phone.id, $event.detail.checked)" [(ngModel)]="phone.isChecked"></ion-checkbox>
  </ion-item>
</div>

修改TS脚本代码：

selectedArray: any[] = [];

selectMember(phoneId: any, isChecked: boolean) {
  if (isChecked) {
    // 检查是否已存在，避免重复
    if (!this.selectedArray.includes(phoneId)) {
      this.selectedArray.push(phoneId);
    }
  } else {
    const index = this.selectedArray.indexOf(phoneId);
    if (index !== -1) {
      this.selectedArray.splice(index, 1);
    }
  }
  console.log(this.selectedArray);
}

这两种方案都能解决你当前的问题，你可以根据自己的习惯选择。测试的时候点击复选框，就能看到selectedArray正确添加或删除对应的ID了。

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