angular - 如何在离子 5 中添加选择所有选项到离子选择

Question

我尝试添加 ion-select-option，然后尝试在更改事件中处理选择所有逻辑，但更改事件根本不会触发。似乎它不支持事件

    <ion-item>
        <ion-label>Test</ion-label>
        <ion-select [(ngModel)]="selectedValues" multiple="true">
            <ion-select-option (ionChange)="selectAll()">Select All</ion-select-option>
            <ion-select-option [value]="option" *ngFor="let option of  items">{{option}}
            </ion-select-option>
        </ion-select>
    </ion-item>

示例https://stackblitz.com/edit/ionic-5-angular-10-start-template-hure6j?file=src/app/tabs/tabs.page.html

标签： angularionic-frameworkionic5

Answer 1

使用 Ionic 多项选择，没有“全选”或“全选”的内置方法，但我想出了一个自定义解决方案来做到这一点。您将需要使用自定义警报组件而不是<ion-select>，并且您需要以编程方式触发警报。

constructor(
    private alertController: AlertController,
    public platform: Platform
  ) {}

  async showAlert() {

    let buttons = [
      {
        text: 'All',
        cssClass: 'all-none-button',
        handler: () => {

          // check all checkboxes
          alert.inputs = alert.inputs.map((checkbox) => {
            checkbox.checked = true;
            return checkbox;
          });

          return false;
        }
      }, {
        text: 'None',
        cssClass: 'all-none-button',
        handler: () => {

          // uncheck all checkboxes
          alert.inputs = alert.inputs.map((checkbox) => {
            checkbox.checked = false;
            return checkbox;
          });

          return false;
        }
      }, {
        text: 'OK',
        handler: (data) => {
          // handle the data returned from the alert here
          console.log(data);
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
      }
    ];

    // adjust button order in four button layout for ios
    if (this.platform.is('ios')) {
      const okButton = { ...buttons[2] };
      const cancelButton = { ...buttons[3] };
      buttons = [buttons[0], buttons[1], cancelButton, okButton];
    }

    const alert = await this.alertController.create({
      header: 'Select Option',
      inputs: [
        {
          label: 'Option 1',
          type: 'checkbox',
          value: 'one',
          checked: false
        },
        {
          label: 'Option 2',
          type: 'checkbox',
          value: 'two',
          checked: false
        },
        {
          label: 'Option 3',
          type: 'checkbox',
          value: 'three',
          checked: false
        },
      ],
      cssClass: 'four-button-alert',
      buttons: [...buttons]
    });

    await alert.present();
  }

您还需要一些自定义 CSS 来获取此自定义警报的四个按钮布局。

.four-button-alert.md {
    .alert-button-group-vertical {
        display: block;

        button:nth-of-type(1),
        button:nth-of-type(2) {
            float: left;
            color: var(--ion-color-medium);
        }

        button:nth-of-type(3),
        button:nth-of-type(4) {
            float: right;
        }
    }
}

.four-button-alert.ios {
    .alert-button-group-vertical {
        flex-direction: row !important;

        button:nth-of-type(1) {
            color: var(--ion-color-medium);
        }

        button:nth-of-type(2) {
            color: var(--ion-color-medium);
            border-right: none;
        }
    }
}

成品看起来像这样（iOS & Android）。