我有一個包含復選框的表單，我想將其發送到 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"
]
任何幫助使其成為可能的幫助將不勝感激。
uj5u.com熱心網友回復：
檢查這個解決方案，我不知道它是最好的解決方案，也許你可以用更奇特的方式來做，但它的作業原理并解決了你的問題：
首先在 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
鏈接到作業演示鏈接，鏈接到編輯模式演示鏈接編輯模式
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336768.html