angular - ionic 2 多选与全选复选框

Question

我想使用 ion-select 提供选择选项。我在第一个位置手动添加了全选选项，当我全选时 View 未更新。如何更新 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

就我而言，我遇到了一个非常相似的问题。注入(inject) 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
   }
}