9

我已经构建了一个 Ionic2 应用程序，我目前正在尝试改进 UX。为此，我收到了一些反馈，让我想到是否有办法让

    <ion-select>
      <ion-option>
      </ion-option>
    </ion-select>

点击后，会立即给我输出，而不是等待用户按下离子操作表当前出现的“确定”和“取消”按钮（http://ionicframework.com/docs/v2/ api/components/select/Select/ ) 默认使用。

任何建议将不胜感激！:)

编辑：

正如@sebaferrreras 所建议的，

如果选项数量超过 6 个，即使通过了 action-sheet 也会使用 alert 界面。

因此，如果您需要使用 6 个以上的选项，则目前您将不得不找到一种解决方法，该功能未在Ionic2 文档中列出。

4

4 回答 4

9

更改选择元素中使用的 API（通过使用ActionSheet API）可能是一种选择。

为此，您只需要添加元素interface="action-sheet"。ion-select

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select interface="action-sheet">
      <ion-option value="f" selected="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

我不确定这是否是您应用中的有效选项（就用户体验而言）。

编辑：

就像您可以在Ionic 2 文档中找到的一样

如果选项数量超过 6 个，即使通过了 action-sheet 也会使用 alert 界面。

于 2016-08-18T10:29:13.360 回答
6

我知道这个线程已有 7 个月的历史，并且 OP 可能早已超越了这个问题，但由于该功能尚未添加到 ionic 框架中，我正在添加我想出的解决方法以供其他人参考。

CSS 部分

直观地说，您需要做的第一件事是添加一些 sass/css 来隐藏不需要的按钮。我通过selectOptions为我的ion-select元素传递一个 css 类“remove-ok”来做到这一点。（我只是删除了确定按钮，但如果有人也需要删除取消按钮，那是一个简单的 css 修改）。

在组件中：

this.selectOptions = {
      cssClass: 'remove-ok'
    };

在 HTML 中：

<ion-select [selectOptions]="selectOptions">

并app.scss添加：

.remove-ok {
    .alert-button:nth-child(2) {
        display: none;
    }
}

脚本部分

现在 OK 按钮已隐藏，您需要以某种方式关闭警报视图。

在隐藏的 OK 按钮上调用click()事件是简单直观的，但您很快就会发现，虽然它在 上完美运行ionic serve，但在实际的 iOS 设备上却无法运行。

解决方案是找到对警报视图的引用，将选中的选项传递给选择处理程序，最后关闭视图。

所以在ngOnInit你的组件类中，你需要这个：

ngOnInit() {
        let root = this.viewController.instance.navCtrl._app._appRoot;
        document.addEventListener('click', function(event){
        let btn = <HTMLLIElement> document.querySelector('.remove-ok .alert-button-default:nth-child(2)');
        let target = <HTMLElement> event.target;
        if(btn && target.className == 'alert-radio-label')
        {
              let view = root._overlayPortal._views[0];
              let inputs = view.instance.d.inputs;
              for(let input of inputs) {
                if(input.checked) {
                  view.instance.d.buttons[1].handler([input.value]);
                  view.dismiss();
                  break;
                }
              }
            }
        });
    }

同样，如果您还打算删除取消按钮，请注意此代码中的 css 引用。

于 2017-03-31T21:26:53.493 回答
1

传递空值： 

<ion-select okText="" cancelText="">
      <ion-option>
      </ion-option>
    </ion-select>

它在我的情况下工作。

于 2018-12-18T13:02:02.340 回答
0

Ionic 6.12.3 版中的实现：

在您的 HTML 中创建ion-select. 添加属性[interfaceOptions]="randomOptions"：

<ion-select interface="action-sheet" [interfaceOptions]="randomOptions" ngModel>
    <ion-select-option value="...">Option #1</ion-select-option>
    <ion-select-option value="...">Option #2</ion-select-option>
</ion-select>

在您的 TS 中，使用您在 HTML 中提供的确切名称创建一个公共变量，并添加您打算使用的选项ion-select。添加属性cssClass: 'randomCSSClassName'：

public randomOptions: any = { 
    cssClass: 'randomCSSClassName',
    ...
};

最后，在您的global.scss文件中添加一个与您在 TS 中提供的名称完全相同的 CSS 类，然后添加.action-sheet-group-cancel带有以下内容的类display: none：

.randomCSSClassName {
    .action-sheet-group-cancel {
        display: none;
    }
}

此实现在 Web、iOS 和 Android 中进行了测试。它完美地工作！

于 2021-01-10T16:16:38.550 回答