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看起来很有希望，但这当然可能会在将来的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');
    }

  }
}

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

1 个答案: