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

Question

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

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

这在敲了几下,会给我输出直线距离,而不是等待用户对当前出现的"OK'and'按下CANCEL’按钮,离子动作片(http://ionicframework.com/docs/v2/ api/components/select/Select /)默认使用.

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

编辑:

正如@sebaferrreras所说,

如果选项数超过6,即使传递了动作表,它也将使用警报界面.

所以,如果你需要使用超过6个选项,你将不得不找到,因为就目前而言,这个功能是一种解决方案不 列出下Ionic2文档.

Answer 1

更改select元素中使用的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>

我不确定这是否是您应用中的有效选项(就UX而言).

编辑:

就像你可以在Ionic 2文档中找到的那样

如果选项数超过6,即使传递了动作表,它也将使用警报界面.

Answer 2

我知道这个线程已经有 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 按钮被隐藏了，你需要以某种方式关闭警报视图。

click()在隐藏的 OK 按钮上调用事件非常简单直观，但您很快就会发现，尽管它在 上运行良好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 引用。