将多个复选框值保存到数据库答案

【问题标题】：Saving multiple checkbox value to database将多个复选框值保存到数据库
【发布时间】：2021-12-07 06:22:36
【问题描述】：

我有一个带有复选框的表单，我想将其发送到 API 以便将其保存到数据库中。

这是city.page.html

<ion-item *ngFor="let city of cities;">
    <ion-checkbox [(ngModel)]="city.id" ></ion-checkbox>
    <ion-label>{{city.name}}</ion-label>
</ion-item>
<ion-button type="button" (click)="saveCity()">Save</ion-button>

这是city.page.ts

city: any;

saveCity() {

    let data = {city: this.city};

    this.http.post('http://example.com/api/saveCity', JSON.stringify(data))
    .subscribe((res: any) => {console.log("success");});
}

问题是我不知道如何以以下格式发送该数据，因为 API 只接受这种格式将其保存到数据库中。

"city": [
    "32",
    "432",
    "231"
]

我们将不胜感激。

【问题讨论】：

您有几个选择。首先，您可以在单击时将城市 ID 添加/删除到组件上的数组中。其次，可以使用表单数组。
@Brandon 我执行了我发布的上述步骤，但不幸的是在 Chrome 控制台中，我得到了 undefined 响应。我很乐意发布正确的格式并回答我和所有有同样问题的人:)。
您不需要对数据对象进行字符串化。您需要将完整的组件代码添加到您的答案中，但我不会使用 ngModel 来保存选定的复选框值。另外，不要使用any 作为您的类型。这只会让你自己失败。
嗯。这很棘手，因为我只知道如何保存输入值。如果您对其进行编码，我会很高兴:)。谢谢。
嗯，是的，这不是这样的。我可以指出您方法中的错误，但 Stack Overflow 不是代码编写服务。

标签： angular api ionic-framework

【解决方案1】：

检查这个解决方案我不知道它是最好的解决方案，也许你可以用更花哨的方式做，但它可以解决你的问题：

首先在 city.page.html 上，更改模型并绑定到一个新的模型，该模型将保存列表中单个复选框的状态，然后添加值标签

    <ion-item *ngFor="let city of cities;">
      <ion-checkbox [(ngModel)]="selectedCities[city.id]"  value="city.id"></ion-checkbox>
      <ion-label>{{city.name}}</ion-label>
   </ion-item>
   <ion-button type="button" (click)="saveCity()">Save</ion-button>

然后在 cites.page.ts 中，添加一个新属性来管理复选框的状态：

selectedCities = {};

然后在您的保存方法中执行此操作，您将过滤仅具有 true（选定项）的对象键，并且您将获取选定选项作为数组：

    saveCity() {
      console.log(this.selectedCities);
      const array = Object.keys(this.selectedCities).filter((key)=> {return this.selectedCities[key]});
      console.log(array);
    }

就是这样，祝你有美好的一天xD

链接到工作演示demo link，链接到编辑模式demo link edition mode

【讨论】：

我更喜欢使用 ReacttiveForms 而不是使用 ngModel 它会更好
@altoqueperro 它工作得很好。但我有另一种不是复选框的表格。你也可以检查一下吗？ stackoverflow.com/questions/69672945/…