离子2选择：删除选定的选项

Question

我在表单中使用了 ion-select 组件，但遇到了一个问题：如果用户选择了一个选项，但又想删除它，它不会提供该选项。我可以添加一个带有空白值的<ion-option>，但认为它不会很好。有没有更好的方法来解决这个问题？

编辑： 这就是我的选择选项现在的样子：

如果用户选择了一个选项，然后改变主意并且不想选择任何选项，那么他可以做到这一点的方式似乎并不十分清楚。即使添加带有空白值的“删除选项”，它仍然看起来像一个选项，对我来说似乎不太好。使用传统的选择，没有文本的空白选项看起来非常直观。但在这种情况下，我正在考虑类似于“（X）删除选定的”，靠近页脚中的“取消/确认”选项，或类似的东西。有任何想法吗？ Ps：另外，ion-option 似乎去掉了我放在选项上的任何 html 标签，所以格式化我的“选择无”选项非常困难

Answer 1

我有一个稍微不同的要求 - 选择一个选项并单击 OK 按钮后，所选值应在 ionChange 调用的函数中使用，然后在 ion-select 中选择的选项应该被取消选择。我尝试了各种站点中提到的各种解决方案，但都没有奏效。即使在 plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview 中将 ngModel 值设置为 null 的工作解决方案也不适合我。 所以我尝试了不同的东西，其中一个成功了。以下是对我有用的方式：-

在 HTML 中，我使用 #languageSelect 作为 ion-select 中 ViewChild 的模板引用变量

<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
  <ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>

在ts文件中用作

@ViewChild('languageSelect') languageSelect: Select;

在 langSelected() 中，它在执行必要的操作后被清除。

langSelected(value) {
 //used the value as required
 ...
 ...
 this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}

Answer 2

如果用户想再次点击ion-select 并选择select-nothing 选项，@sonu 的解决方案将起作用，但我不觉得这是一个愉快的体验。

获得所需内容的另一种方法是使用ion-select 旁边的清除小按钮，该按钮仅在用户已经选择某些内容时出现：

  <ion-label>Options</ion-label>
  <ion-select [(ngModel)]="option">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

  <div *ngIf="option=='m' || option=='f'">
    <ion-label> {{option}} </ion-label>
    <ion-button  (click)='removeSelection()'>
       <ion-icon name='close'></ion-icon>
    </ion-button>
  </div>

其中removeSelection() 是一个将选择更改为"No selection" 的函数，可能通过设置this.option=null。

当然，您可以根据需要设置此按钮的样式。您可能还想查看 ionic chips。特别是，删除筹码是实现您的意图的一种方式。

Answer 3

要触发处理取消选择的函数，您可以像这样使用 ionCancel 属性

  <ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
          <ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
  </ion-select>

在代码中只实现你声明的函数；在这种情况下 clearSelection()

clearSelection() {
    this.myModel.selectedValue = null;
}

现在每次按下清除按钮都会触发您的功能

文档：ion-select

Answer 4

最好有空值选项。您可以使用 ionic docs 中的代码

示例：

<ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="">Select Gender</ion-option>
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

或者您可以添加任何事件以清除选择。