Question

我正在研究ionic2项目。我使用离子选择元素。

我搜索了一种以编程方式关闭选择框的方法，选择任何项目（而不是等待用户按OK）。

  <ion-select id="select" #select>
      <ion-option (ionSelect)="closeAndSave()" *ngFor="let option of enumList" [value]="option">{{ option}}</ion-option>
    </ion-select>

`

class myClass{
    @viewChild('select') select:Select;
    closeAndSave(){
        /*it is come here on press any option. but how can I close here my select element? I tried: this.select.destroy()  - not do any thing. any solution?*/
    }

`

Answer 1

这就是我所做的：

this.court = val;
this.select.close();

将其放入closeAndSave功能。

在此之前，您需要从closeAndSave函数传递一些值，如：

(ionSelect)="closeAndSave('someValueHere')"

然后在你的TS代码中使用这个值：

import { Select } from 'ionic-angular';

class myClass{
    @ViewChild(select) select:Select;
    closeAndSave(val){
    this.someVar = val;
        this.select.close();
    }
}

Answer 2

尝试测试此标签：

您只需在离子选择元素中添加 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而言）。

源：https://stackoverflow.com/a/39015858/308578

Answer 3

我用了这个：（document.querySelector（'ion-backdrop'）as HTMLElement）.click（）;

Answer 4

我不确定这是否有效，但它显示为弹出窗口，并且可以使用离子ViewController取消弹出窗口。

你可以像这样使用它：

AF_INET6

离子2离子选择 - 以编程方式关闭选择框

4 个答案: