セグメント内のIonic2チェックボックスの問題

Question

私はこのような画面を持っています。

ここで私は、第一セグメント（マンセグメント）&は、女性のセグメントから他のチェックボックスを選択するために、第二のセグメント（女セグメント）に行くから、チェックボックスを選択しています。しかし、最初のセグメントに戻ると、以前のすべてのチェックボックスがオフになっていますが、選択したフォームコントロールに値があることがわかります。私は&の新しいformcontrolを値のついたformarrayに持ってきて、チェックを外すと&のチェックを外す。

私は理解を深めるためにコードを追加しています。

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 
}