Question

我需要一些有关代码的帮助。

我有一个应用程序，对于此页面，我使用复选框。我想从用户那里得到更多选择。当我单击按钮时，我想查看所有选中的选项。

我的.html代码

 <ion-item *ngFor="let item of durumozellikleri">
        <ion-label>{{item.ozellik}}</ion-label>
        <ion-checkbox [(ngModel)]="durumozellik"></ion-checkbox>
 </ion-item>

 <button ion-button (click)="getAll()">Click Me</button>

我的.ts代码

 let headers: any = new HttpHeaders({ 'Content-Type':'application/json' }),
 options: any = { "key": "kontrol", "id": this.id},
 url: any = 'http://207.180.202.55/MisKebap/php/durumozellikgetir.php';


 this.http.post(url, JSON.stringify(options), headers)
 .map(res => res.json())
 .subscribe(res => {

   this.durumozellikleri = res;
 })

Answer 1

您可以尝试对component.ts和component.html进行以下更改。

在component.html上，必须将durumozellikleri数组中每个元素的检查值绑定到ngModel。

<ion-item *ngFor="let item of durumozellikleri">
  <ion-label>{{item.ozellik}}</ion-label>
  <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
</ion-item>

<button ion-button (click)="getAll()">Click Me</button>

在您的component.ts上，我不确定durumozellikleri的确切结构，但是您应该在checked中的每个对象中添加一个名为durumozellikleri的附加属性。要仅获取选中的选项，可以使用Array.filter（）。

this.durumozellikleri=[
  {ozellik : '123', checked : false},
  {ozellik : '234', checked : false},
  {ozellik : '214', checked : false},
];

getAll() {
  console.log(this.durumozellikleri);
  const res = this.durumozellikleri.filter(obj => obj.checked);
  console.log(res)
  // do the rest here
}

这里是工作中的demo。

Answer 2

您可以向durumozellikleri中的项目添加字段，并使用该字段存储复选框值，如下所示；

  durumozellikleri = [
    { ozellik: "ozellik1", secim: false },
    { ozellik: "ozellik2", secim: false },
    { ozellik: "ozellik3", secim: false },
  ]

以html

<ion-item *ngFor="let item of durumozellikleri">
    <ion-label>{{item.ozellik}}</ion-label>
    <ion-checkbox [(ngModel)]="item.secim"></ion-checkbox>
 </ion-item>

这是一个简单的演示https://stackblitz.com/edit/angular-u6ecgk

我如何从多个复选框中获取所有价值-Ionic

2 个答案: