获取所选项目并验证已检查项目的数量？

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

我做了以下事情：

获取我们的 Ion Select 的引用@ViewChild并搜索它的属性，直到找到所检查项目的值的存储位置。select._overlay.data.inputs看起来很有希望，但当然这可能会在未来的 Ionic 版本中发生变化。

一旦我们获得了输入，我们就可以过滤那些真正被检查的并执行我们的逻辑。

请参阅此处的代码或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');
    }

  }
}