離子2多項選擇，選擇所有復選框

Question

我想提供帶有離子選擇的選擇選項。 我在第一個位置手動添加了選擇所有選項，當我選擇所有視圖未更新時。 如何更新視圖？

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

在我的情況下，我有一個非常類似的問題。 注入ChangeDetectorRef並調用cdRef.detectChanges（）

所以代碼必須像：

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

一個解決方案是將所有學生都放在模型中進行離子選擇

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

TS。

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

我假設學生是一群學生。