Question

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

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

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

任何建议都将不胜感激！：）

修改

正如@sebaferrreras建议的那样，

如果选项数超过6，即使传递了操作表，也会使用提醒界面。

因此，如果您需要使用6个以上的选项，那么您将不得不找到一个解决方法，此功能<<>> 列出 < strong> Ionic2 docs 。

Answer 1

更改select元素中使用的API（使用ActionSheet API）可能是一个选项。

为此，您只需在'MyString1_test{x:02d}_edit{x:04d}' MyString1_test00_edit0000 MyString1_test01_edit0001 MyString1_test02_edit0002 MyString1_test03_edit0003 MyString1_test04_edit0004元素中添加interface="action-sheet"。

ion-select

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

修改

就像您在Ionic 2 docs
中找到的一样

如果选项数超过6，它将使用警报界面即使通过了行动表。

Answer 2

我知道这个帖子已经有7个月了，OP可能已经过了很长时间了，但由于这个功能还没有被添加到离子框架中，我添加了我为其他人提出的解决方法＆＃39 ; s参考。

CSS PART

直观地说，你需要做的第一件事是添加一些sass / css来隐藏不需要的按钮。我通过传递一个css类＆＃34; remove-ok＆＃34;我selectOptions元素的ion-select。（我只是删除了OK按钮，但如果有人需要删除取消按钮，这是一个简单的css修改）。

在组件中：

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

并在HTML中：

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

在app.scss添加：

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

SCRIPT PART

现在隐藏了“确定”按钮，您需要以某种方式关闭警报视图。

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

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

因此，在组件类的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引用。

Answer 3

传递空值：

setup-x86_64.exe -B -O -s http://mirror.clarkson.edu/cygwin

以我为例。

Answer 4

在 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 中进行了测试。完美运行！

Ionic2离子选择没有确定和取消

4 个答案: