单击复选框时从列表中获取值

Question

我有一个带复选框的列表，当我选中一个复选框时，我需要在点击完成按钮时显示所选项目

 <ion-list *ngFor="let item of options" style="margin-bottom: 0px">
        <ion-grid>
            <ion-row>
                <ion-checkbox ></ion-checkbox>
                <ion-col>
                    <ion-label style="margin-bottom: 0px;  margin-top: 0px;">{{item.val}}</ion-label>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list> 
    <button (click)="done()" >done</button>

done(){
        console.log("done");
        /*here  i need to get the values of the items that are selected*/
    }



public options =    [{
                        "val" : "United States"                          
                    },
                     {
                        "val" : "Afghanistan"
                    },
                     {
                        "val" : "Albania"
                    },
                     {
                        "val" : "Algeria"
                    },
                     {
                        "val" : "American Samoa"
                    }]

“选项是一系列项目” 有人可以帮助我只获得选定的值

Answer 1

checkboxes:boolean[];

constructor(){
  this.checkboxes = this.options.map(v => false);
}

done(){
  console.log("done");
  var result = []; 
  this.options.forEach(
      (val, idx) => result.push({item: val.val, checked: this.checkboxes[idx]}));
  console.log(result);
}

<ion-list *ngFor="let item of options; let i=index" style="margin-bottom: 0px">

  ...
  <ion-checkbox [(ngModel)]="checkboxes[i]" ></ion-checkbox>