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

【问题标题】：Get the selected items and validate the number of checked items?获取所选项目并验证已检查项目的数量？
【发布时间】：2019-01-03 19:42:15
【问题描述】：

我正在使用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")
 }

}

【问题讨论】：

查看stackblitz.com/edit/ionic-flyqdr?file=pages%2Fhome%2Fhome.html
您想在每个选项单击时或单击确定按钮后查找结果？
点击确定按钮后...当我选中/取消选中任何选项时。
@AmiLinn 我打算在单击“确定”按钮之前检测每个选项何时被选中或取消选中
@AnandhSp 我打算在单击“确定”按钮之前检测每个选项何时被选中或未选中

标签： ionic-framework ionic2 ionic3

【解决方案1】：

我做了以下事情：

获取我们 Ion Select 的引用作为 @ViewChild 并搜索它的属性，直到我找到存储检查项目的值的位置。 select._overlay.data.inputs 看起来很有希望，但当然这可能会在未来的 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');
    }

  }
}

【讨论】：