如何从 Ionic 4 中的 ion-select-option 获取选择事件？

Question

我需要为 Ionic 4 选择列表实现“全选”选项。但是，我没有找到从 ion-select-option 或 ion-select 触发（单击）或类似事件的方法。有什么建议？请注意，Ionic 3 的解决方案不一定适用于 v4。

<ion-item>
  <ion-label>Header</ion-label>
  <ion-select [(ngModel)]="items" multiple okText="OK" cancelText="Cancel">
    <ion-select-option value="all">Select all</ion-select-option>
    <ion-select-option *ngFor="let item of items" [value]="item.id">{{ item.name }}</ion-select-option>
  </ion-select>
</ion-item>

Answer 1

试试这样：

Working Demo

.ts

  items;

  constructor() {
    this.options.unshift({
      id: -1,
      name: `Select All`
    });
  }

  onChange(evt) {
    if (evt == -1) {
      this.items = this.options.map(x => x.id);
    } else {
      let selectAllIndex = this.items.indexOf(-1);
      this.items.splice(selectAllIndex, 1);
    }
  }

.html

    <ion-select [(ngModel)]="items" multiple okText="OK" cancelText="Cancel" (ngModelChange)="onChange($event)">
        <ion-option *ngFor="let item of options" [value]="item.id">
            {{ item.name }}
        </ion-option>
    </ion-select>

Answer 2

您可以使用 ViewChild 执行此操作，如下所示。

HTML

<ion-item>
    <ion-label>Header</ion-label>
    <ion-select #myselect multiple [(ngModel)]="items" okText="OK" 
             cancelText="Cancel" 
            (ngModelChange)="onChange()" 
            (click)="openSelect(myselect)">
      <ion-option [value]="all" (ionSelect)="selectAll(myselect)">{{all}}</ion-option>
    <ion-option *ngFor="let option of options" [value]="option">{{option}}</ion-option>
  </ion-select>
</ion-item>

TS

  items: any = [];

  options = ['A', 'B', 'C'];
  all: string = 'select all';

  @ViewChild('myselect') mySelect: Select;

  selectAll(select: Select){
    let selectInputs = select._overlay['data']['inputs'];
    selectInputs.map((array) => array.checked = true);
  }
  openSelect(select: Select){
    select.open();
  }

当您单击OK button 时，所选项目数组中将出现select all。如果您不需要，您可以在触发 ngModelChange 事件时在 onChange 方法中将其删除，如下所示。

onChange() {
  const allIndex = this.items.indexOf(this.all);
  this.items.splice(allIndex, 1);
}

StackBlitz