段中的 Ionic2 复选框问题答案

【问题标题】：Ionic2 checkbox issue in segments段中的 Ionic2 复选框问题
【发布时间】：2018-01-15 21:48:00
【问题描述】：

我有这样的屏幕。

在这里，我从第一段（男人段）中选择复选框并转到第二段（女人段）以从女性段中选择其他复选框。但是当我回到第一段时，我之前的所有复选框都未选中，尽管我可以看到所选表单控件中有值。每次我检查并在未选中时删除时，我都采用了一个表单数组并推送一个带有值的新表单控件。

我正在添加代码以便更好地理解。

constructor(public fb : FormBuilder){
   this.checkboxForm = this.fb.group({
        categories : this.fb.array([],CustomValidators.multipleCheckboxRequireAtleastOne)
    });
}


updateCheckedOptions(category, isChecked) {
   const categories = <FormArray>this.checkboxForm.controls['categories'];
   if(isChecked) {
     categories.push(new FormControl(category));
     console.log(categories.controls);
  } 
  else {
     let index = categories.controls.findIndex(x => x.value.id == category.id);
     categories.removeAt(index);
   }

}

在视图中

 <form [formGroup]="checkboxForm" (ngSubmit)="onSubmit(checkboxForm.value)">
     <ng-template *ngFor="let category of categories; let i=index">
        <ion-checkbox (ionChange)="updateCheckedOptions(category,$event.checked)">
        </ion-checkbox>
     </ng-template>
     <button type="submit" ion-button [disabled]="!checkboxForm.valid">go next</button>
 </form>

请帮忙提出你的建议。

【问题讨论】：

标签： angular typescript checkbox ionic-framework ionic2

【解决方案1】：

不知道你想用const categories 做什么，但如果我是你，我会这样做：

<ng-template *ngFor="let category of categories; let i=index">
     <ion-checkbox [(ngModel)]="category.isChecked">
     </ion-checkbox>
</ng-template>

当您选择或取消选择复选框时，它将自动更新您的数据。如果你想得到哪个复选框被选中，只需过滤它：

submitForm(){
   let checkedCategories = this.categories.filter((elm)=>{
      return elm.isChecked;
   })
   console.log(checkedCategories)//Your selected categories here
}

【讨论】：