Ionic2离子选择没有确定和取消-Java 学习之路

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

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

在点击时，会直接给我输出，而不是等待用户按下当前出现的离子操作表（http://ionicframework.com/docs/v2/api/components/select/Select/）默认使用的'OK'和'CANCEL'按钮 .

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

EDIT:

正如@sebaferrreras所说，

If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.

因此，如果您需要使用6个以上的选项，那么您将不得不找到一个解决方法，此功能在 Ionic2 docs 下为 NOT listed .

3 回答

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

为此，您只需在 ion-select 元素中添加 interface="action-sheet" .
```
<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而言） .

EDIT:

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

如果选项数超过6，即使传递了动作表，它也将使用警报界面 .
回复于 2024-05-02T13:11:09+08:00
3
我知道这个帖子已经有7个月了，OP可能已经过了很长时间了，但由于这个功能还没有被添加到离子框架中，我正在添加我想出的解决方法供其他人参考 .

CSS PART

直观地说，你需要做的第一件事是添加一些sass / css来隐藏不需要的按钮 . 我通过为我的 ion-select 元素传递一个css类"remove-ok"到 selectOptions 来做到这一点 . （我'm only removing OK button but if someone needs to remove cancel button as well, that'是一个简单的css修改） .

在组件中：
```
this.selectOptions = {
      cssClass: 'remove-ok'
    };
```
并在HTML中：
```
<ion-select [selectOptions]="selectOptions">
```
并在 app.scss 添加：
```
.remove-ok {
    .alert-button:nth-child(2) {
        display: none;
    }
}
```
SCRIPT PART

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

在隐藏的OK按钮上调用 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引用 .
回复于 2024-05-02T13:11:09+08:00

传递空值：

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

它在我的情况下工作 .

回复于 2024-05-02T13:11:09+08:00

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

3 回答

相关问题