分段中的Ionic2复选框问题

Question

我有这样的屏幕。

我在这里选择第1段（Man Segment）＆amp;的复选框。进入第二段（女性片段）以从女性片段中选择其他复选框。但是当我回到第1段时，我所有以前的复选框都未被选中，尽管我可以看到所选表单控件中有值。我带了一个formarray＆amp;每次检查时都会推送一个有价值的新表单控件。取消选中时删除。

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

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>

请帮助您提出建议。

Answer 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
}