Ionic 2选择：删除所选选项

Question

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

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

如果用户选择了一个选项，然后改变主意并且不想选择任何选项，那么他的表现似乎并不清楚。即使添加＆＃34;删除选项＆＃34;空白值，它看起来仍然是一个选项，对我来说似乎并不好看。使用传统选择，没有文本的空白选项看起来非常直观。但在这种情况下，我在考虑类似于＆＃34; （X）删除选定的＆＃34;，接近＆＃34; Cancelar / Confirmar＆＃34;页脚中的选项，或类似的东西。有任何想法吗？ Ps：同样，ion-option似乎剥去了我选择的任何html标签，因此很难格式化我的＃34;选择无＆＃34;选项

Answer 1

如果用户想再次点击ion-select并选择select-nothing选项，@ sonu的解决方案将会有效，但我找不到愉快的体验。< / p>

获得所需内容的另一种方法是使用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。

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

Answer 2

要触发处理取消选择的功能，您可以仅使用 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 3

使用空白值选项的更好方法。您可以按离子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>

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

Answer 4

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

在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
}