Ionic - 如何在离子选择上显示 [selectOptions] 中定义的自定义按钮？答案

【问题标题】：Ionic - How to show custom buttons defined in [selectOptions] on ion-select?Ionic - 如何在离子选择上显示 [selectOptions] 中定义的自定义按钮？
【发布时间】：2019-04-27 08:27:51
【问题描述】：

我正在尝试通过在 [selectOptions] 中传递选项来定义离子选择上的自定义按钮，如下所示：

HTML：

<ion-select [(ngModel)]="selectedSkypeUser" [selectOptions]="getSelectOptions()">
    <ion-option *ngFor="let user of skypeUsers" [value]="user.name"> 
        {{user.name}}
    </ion-option>
</ion-select>

TS：

private skypeUserButtons = {
    title: "Skype users",
    subTitle: "Select the user you want to change",
    buttons: [
        {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {}
        },
        {
            text: 'Delete',
            handler: () => {
                this.deleteSkypeUser();
            }
        },
        {
            text: 'Add new user',
            handler: () => {
                this.addSkypeUser();
            }
        }
    ]
};

getSelectOptions() {
    return this.skypeUserButtons;
}

标题和子标题显示正常，但按钮只是默认按钮。我究竟做错了什么？我该如何解决？

谢谢！

【问题讨论】：

我也有同样的疑问。也许没有办法做到这一点。
我以不同的方式修复了它。可以稍后发布答案。
这会很有帮助！在关闭我曾经考虑从头开始创建自己的选择组件的选择时，我也需要执行一个操作。
这基本上就是我所做的。我现在就发帖。

标签： ionic2 ionic3 alert ionic4 ion-select

【解决方案1】：

这并没有完全回答问题，但它实际上是一种有效的解决方法。（也许是目前唯一的解决方案）。

我刚刚创建了一个触发弹出窗口的简单按钮，但这可以是一个样式看起来像常规选择的元素，并显示所选选项或您想要的任何内容：

HTML：

<button ion-button icon-left round (click)="showUserDialog()">
    Edit users
</button>

TS：

showUserDialog() {
  let inputs = [];
  let users = this.skypeUsers;
  users.forEach(user => {
      inputs.push({
          type: 'radio',
          label: user.name,
          value: user.name
      });
  });

  let alert = this.alertCtrl.create({
    title: "Select user",
    inputs,
    buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
            'Delete',
            handler: data => {
                // data == selected user.name (value)
            }
        }
    },
    {
        text: 'Add new user',
        handler: () => {
            // Trigger logic to add new user
            this.createNewUser()

            // Return true to close the alert - false to keep it open
            return true;
        }
    }]
  });

  alert.present();
}

【讨论】：