Как получить событие выбора из параметра ion-select-option в Ionic 4?

Мне нужно реализовать опцию «выбрать все» для списка выбора 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>

ionic-framework angular ionic4 ionic-native ion-select
person Roman Volkov    schedule 30.11.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте вот так:

Рабочая демонстрация

.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>
person Adrita Sharma    schedule 30.11.2019
comment
Спасибо за пример кода. Но демо не работает. Все видимые элементы должны быть выбраны / отменены в режиме реального времени, если флажок «Выбрать все» установлен или снят. - person Roman Volkov; 30.11.2019
comment
И он использует Ionic 3 для Angular, а не 4. - person Roman Volkov; 30.11.2019

arrow_upward
2
arrow_downward

Вы можете сделать это с помощью 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

person Sudarshana Dayananda    schedule 30.11.2019
comment
Это Ionic 3. В Ionic 4 нет (ionSelect). - person Roman Volkov; 01.12.2019
comment
Я не мог помочь вам, потому что stackblitz еще не обновлен до ionic 4 - person Sudarshana Dayananda; 01.12.2019
comment
@SudarshanaDayananda вы найдете какое-нибудь решение. Я тоже столкнулся с той же проблемой. В onic 4 нужна кнопка Select-All / de-Select-all - person user8462556; 11.03.2020
comment
@ user8462556 Правильно опубликуйте свой вопрос в stackoverflow со ссылкой на stackblitz и поделитесь ссылкой на вопрос. тогда я постараюсь вам помочь. - person Sudarshana Dayananda; 11.03.2020