Ion 2x selection with all checkboxes selected

Question

I want the selection option to be selected using Ion-select . I manually added the selected option to the first position, when I select the whole view is not updated. How to update the view?

.html

<ion-select multiple="true">
      <ion-option (ionSelect)="allClicked()">select all</ion-option>
      <ion-option *ngFor="let item of students ; let i = index" [selected]="item.checked" [value]="item">{{item.studentName}}</ion-option>
</ion-select>

.ts

       allClicked(){
        if(this.isAll){
           console.log(this.isAll)
            this.isAll = false;
            for (let temp of this.students) {
             temp.checked = false;
               }
        }else{
        this.isAll = true;

        for (let temp of this.students) {
           temp.checked = true;
           }
          }
        console.log("all select event ");
        }

Answer 1

In my case, I had a very similar problem. insert ChangeDetectorRef and call cdRef.detectChanges ()

Therefore, the code should be like this:

import {Component, OnInit, ChangeDetectorRef} from 'angular2/core';

export class RecentDetectionComponent implements OnInit, OnDestroy {

constructor(private cdRef: ChangeDetectorRef // <== added ) {

}



 allClicked(){
   if(this.isAll){
   console.log(this.isAll)
   this.isAll = false;
   for (let temp of this.students) 
   {
   temp.checked = false;
   }
   }else{
   this.isAll = true;
   for (let temp of this.students) {
   temp.checked = true;
   }
   }
   console.log("all select event ");
   this.cdRef.detectChanges(); // <== added
   }
}

Answer 2

one solution is to put all the student in the model to select an ion

<ion-select multiple="true" [(ngModel)]="selectStudents">
      <ion-option (ionSelect)="allClicked()">select all</ion-option>
      <ion-option *ngFor="let item of students ; let i = index" [selected]="item.checked" [value]="item">{{item.studentName}}</ion-option>
</ion-select>

c.

selectStudents:[];
function allClicked(){
    selectStudents=[];
    students.filter((data)=>{
       this.selectStudents.push(data.studentName);
    });
}

I assume that students are many students.