在Ionic中如何将选中的checkbox值保存为数组并解决undefined报错

问题根因 #

1. 双向绑定逻辑错误：直接将[(ngModel)]绑定到manager.id会覆盖原始的id值为复选框的布尔选中状态，丢失原本的id数据
2. TS中声明的manager变量和遍历用的managers数组没有关联，读取this.manager自然返回undefined

修正后的代码 #

前端模板部分

<ion-content>
  <ion-item *ngFor="let manager of managers; let i = index">
    <ion-checkbox
      color="primary"
      [(ngModel)]="manager.isChecked"
      style="margin-right: 10px"
    ></ion-checkbox>
    <ion-label>{{manager.name}}</ion-label>
  </ion-item>

  <ion-button (click)="save()">Save</ion-button>
</ion-content>

TS逻辑部分

// 可根据实际业务调整类型定义
interface Manager {
  id: number;
  name: string;
  isChecked: boolean;
}

// 存储最终选中的管理员id数组
selectedManagerIds: number[] = [];
// 初始化managers数组时新增isChecked字段标记选中状态
managers: Manager[] = [
  {id: 1, name: '管理员1', isChecked: false},
  {id: 2, name: '管理员2', isChecked: false},
  {id: 3, name: '管理员3', isChecked: false}
];

constructor(private http: HttpClient) {}

save(){
  // 过滤已选中的项，提取id存入数组
  this.selectedManagerIds = this.managers
    .filter(manager => manager.isChecked)
    .map(manager => manager.id);
  
  let data ={
    test: this.selectedManagerIds,
  }
  console.log(data);
}

补充说明 #

如果managers数组是从接口请求获取的，拿到返回数据后遍历补充isChecked: false字段即可：

this.http.get<{id:number,name:string}[]>('接口地址').subscribe(res => {
  this.managers = res.map(item => ({...item, isChecked: false}));
})

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