时间戳

首页 > 解决方案 > 添加“全选”按钮以进行离子选择

html - 添加“全选”按钮以进行离子选择

问题描述

我正在使用 ionic 4，我想通过 interfaceOptions 在离子选择上设置自定义按钮

HTML

<ion-item>
  <ion-label>Lines</ion-label>
  <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOptions">
    <ion-select-option [value]="line" *ngFor="let line of Lines">{{linea.Name}}</ion-select-option>
  </ion-select>
</ion-item>

TS

customAlertOptions: any = {
buttons: [
  {
    text: 'Select All',
    handler: (blah) => {
      console.log('Select All Clicked');
    },
  {
    text: 'No',
    handler: (blah) => {
      console.log('Confirm Cancel: blah');
    }
  }, {
    text: 'Okay',
    handler: () => {
      console.log('Confirm Okay');
    }
  }
]

};

但是，仅显示默认按钮（确定和取消）

医生说应该可以

https://ionicframework.com/docs/api/select

我可以看到以前版本的 Ionic 已经报告了这一点

https://forum.ionicframework.com/t/custom-button-for-ion-select-through-selectoptions-not-working/157305

是否有可能在 Ionic 4 上进行这项工作？有解决方法吗？

编辑：我尝试使用 PopOver 界面，结果相同

标签： htmltypescriptionic-frameworkionic4

解决方案

从我所见，您尝试做的事情是不可能的。

文档实际上只说您可以设置按钮文本：

默认情况下，警报有两个按钮：Cancel和OK。可以使用cancelText和okText属性自定义每个按钮的文本。

并不是说可以自定义按钮。

您可以传入，interfaceOptions但稍后会被默认按钮集覆盖：

代码如下所示：

const alertOpts: AlertOptions = {
  mode,
  ...interfaceOptions,

  header: interfaceOptions.header ? interfaceOptions.header : labelText,
  inputs: this.createAlertInputs(this.childOpts, inputType),
  buttons: [
    {
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.ionCancel.emit();
      }
    },
    {
      text: this.okText,
      handler: (selectedValues: any) => {
        this.value = selectedValues;
      }
    }
  ],
  cssClass: ['select-alert', interfaceOptions.cssClass,
             (this.multiple ? 'multiple-select-alert' : 'single-select-alert')]
};
return alertController.create(alertOpts);

如您所见...interfaceOptions,，在开始时传入，然后按钮设置为默认值，唯一的自定义选项是确定或取消文本。

推荐阅读