如何从离子4的离子选择选项中获得选择事件？

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。如果不需要，可以在触发以下[[onChange事件时在ngModelChange方法内按如下所示将其删除。

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

StackBlitz