Ionic2 离子选择没有 OK 和 Cancel

Posted 2023-03-13

【中文标题】Ionic2 离子选择没有 OK 和 Cancel

【英文标题】：Ionic2 Ion-select without OK and Cancel

【发布时间】：2016-12-25 04:01:00

【问题描述】：

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

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

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

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

编辑：

正如@sebaferrreras 所建议的，

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

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

【问题讨论】：

您找到解决方案了吗？

@user3153278 我也在为你所拥有的任何更新答案而苦苦挣扎

除非是你列出的选项少于6个都可以，否则现阶段不行。

【参考方案1】：

可以选择更改选择元素中使用的 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>

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

---

编辑：

就像你可以在Ionic 2 docs找到一样

如果选项数量超过6个，会使用alert界面 即使通过了操作表。

【讨论】：

我不确定我是否明白你的意思。添加操作表界面只给了我们四个选项，似乎都与我的问题无关。感谢您的回答想法！ :-) @sebaferreras

“只给我们四个选项”是什么意思？请查看this plunker。无论如何，如果选项不止几个，那么 select 组件似乎仍然使用 Alert API。我将在那个 plunker 中测试一些东西，如果我找到可以帮助的东西，我会更新答案:)

对不起，我的意思是 ActionSheet 接口似乎有 4 个方法，只能扩展。而且，是的，这正是我正在寻找的功能。您所说的“如果选项不止几个，则选择组件仍使用警报 API”是什么意思？ plunker 的示例有多个选项（可能确实使用了 Alert API），但缺少 OK 和 Cancel 按钮，并在鼠标单击时选择选项。

是的，但是如果您只向选择元素添加另一个选项，则会显示警报。因此，如果这是您正在寻找的功能，我将进一步调查可用于此 API 的选项数量，并使用该信息编辑帖子。

哦，我明白了！如果我设法找到解决方案，我现在将对此进行调查并稍后编辑该帖子。如果您找到更好的解决方案，请随时发布任何其他建议！ :) 谢谢

【参考方案2】：

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

CSS 部分

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

【讨论】：

嗨，这很好用，但我发现了这个问题。请查看here

而且我将返回值作为数组而不是字符串？

关于 我想再次将 css 改回 OK 按钮但它不起作用...

【参考方案3】：

传递空值：

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

它在我的情况下工作。

【参考方案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 类，然后添加带有 display: none 的类 .action-sheet-group-cancel：

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

此实现已在 Web、iOS 和 Android 中进行了测试。效果很好！