Question

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

--add-data="path/to/folder/*;."

Answer 1

尝试这样：

Working Demo

.ts

import {Component} from '@angular/core';
import {FormBuilder, FormArray, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'form-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public emailForm: FormGroup;
  public emailLabels = ['Home', 'Work', 'Other'];
  public validationMsgs = {
    'emailAddress': [{ type: 'email', message: 'Enter a valid email' }]
  }

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.emailForm = this.formBuilder.group({
      emails: this.formBuilder.array([this.createEmailFormGroup()])
    });
  }

  public addEmailFormGroup() {
    const emails = this.emailForm.get('emails') as FormArray
    emails.push(this.createEmailFormGroup())
  }

  public removeOrClearEmail(i: number) {
    const emails = this.emailForm.get('emails') as FormArray
    if (emails.length > 1) {
      emails.removeAt(i)
    } else {
      emails.reset()
    }
  }

  private createEmailFormGroup(): FormGroup {
    return new FormGroup({
      'emailAddress': new FormControl('', Validators.email),
      'emailLabel': new FormControl('')
    })
  }
}

.html

  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);
    }
  }

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

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

2 个答案: