获取选定的项目和验证检查的项目有多少？

Question

我使用的是ion-select，我使multiple属性选择多个选项。我不能找到一种方法来禁用的其余选项实时如果3个选项已经被选中。我目前使用的ionSelect事件，但是当一个选项被选中它才会起作用。我怎样才能解决我的问题？我怎样才能解决我的问题？我想知道我是怎么知道我有多少选择标记，并实时获得自己的价值。

这是我的代码：https://stackblitz.com/edit/ionic-8wewvd?file=pages/home/home.ts

页/家

<ion-label>Select a person</ion-label>
<ion-select [(ngModel)]="person" multiple="true">
  <ion-option *ngFor="let item of options; let i = index" 
    [value]="item.id" (ionSelect)="fn_checkOptions()" >
    {{item.name}}
  </ion-option>
</ion-select>

export class HomePage {
public options:object=[];


constructor(public navCtrl: NavController) {
this.options= 
[
  {"name":"pedro","id":1},
  {"name":"juan","id":2},
  {"name":"maria","id":3},
  {"name":"velez","id":4},
  {"name":"yaya","id":4}
 ]
}

 fn_checkOptions(){
  alert("hey")
 }

}

Answer 1

我做了以下内容：

获取我们的离子选择的参考作为@ViewChild和搜索它的属性，直到我发现了检查项目的值存储在那里。 select._overlay.data.inputs看起来很有希望，但当然这可能会受到未来版本中离子的变化。

一旦我们得到了输入，我们可以filter那些谁是真正的检查，并尽我们的逻辑。

见这里的代码或Stackblitz。

HTML：

<ion-item>
    <ion-label>Select a person</ion-label>
    <ion-select #select [(ngModel)]="person" multiple="true">
        <ion-option *ngFor="let item of options; let i = index" [value]="item.id" (ionSelect)="fn_checkOptions()">
            {{item.name}}
        </ion-option>
    </ion-select>
</ion-item>

TS：

import { Component, ViewChild } from '@angular/core';
import { NavController, Select } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('select', { read: Select }) select;

  public options: object = [];

  constructor(public navCtrl: NavController) {
    this.options =
      [
        { "name": "pedro", "id": 1 },
        { "name": "juan", "id": 2 },
        { "name": "maria", "id": 3 },
        { "name": "velez", "id": 4 },
        { "name": "yaya", "id": 4 }
      ]
  }

  fn_checkOptions() {
    let inputs = this.select._overlay.data.inputs;
    let checkedItems = inputs.filter(item => item.checked);
    if (checkedItems.length === 3) {
      // Disable checkboxes here
      console.log('Three checkboxes have been checked');
    }

  }
}