如何将Ionic复选框选中值按指定数组格式提交API存入数据库

修改思路 #

你当前的问题是复选框绑定逻辑错误，没有正确收集选中项的id。只需两步调整即可匹配后端要求的参数格式：

1. 调整复选框绑定规则，改为绑定每个城市的选中状态
2. 提交时筛选所有选中的城市，提取id转为字符串格式组成数组

修改后 city.page.html 代码

<ion-item *ngFor="let city of cities;">
    <!-- 绑定每个城市的选中状态，而不是直接绑定city.id -->
    <ion-checkbox [(ngModel)]="city.isSelected" ></ion-checkbox>
    <ion-label>{{city.name}}</ion-label>
</ion-item>
<ion-button type="button" (click)="saveCity()">Save</ion-button>

修改后 city.page.ts 代码

// 原单独定义的city变量可删除，直接使用已有的cities数组即可
saveCity() {
    // 筛选选中的城市，提取id转为字符串组成数组
    const selectedCityIds = this.cities
      .filter(city => city.isSelected)
      .map(city => String(city.id));
    const data = { city: selectedCityIds };

    // Angular HttpClient会自动将对象序列化为JSON，无需手动调用JSON.stringify
    this.http.post('http://example.com/api/saveCity', data)
    .subscribe((res: any) => {console.log("success");});
}

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