ionic-framework - 获取所选项目并验证选中项目的数量？

Question

我正在使用 ion-select我正在启用 multiple属性来选择几个选项。如果已经检查了 3 个选项，我无法找到实时禁用其余选项的方法。我目前正在使用 ionSelect事件，但它仅在选中一个选项时才有效。我该如何解决我的问题？我该如何解决我的问题？我想了解我如何知道我标记了多少选项并实时获取它们的值(value)。

这是我的代码:
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

我做了以下事情:

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

一旦我们得到输入，我们就可以 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');
    }

  }
}