清除离子选择选项

Question

我有一个带有动态生成的 Ion Select 选项的 Ion Select。有时，离子选择可能只有一个离子选择选项（例如，用户仅创建了一个项目）。

当用户单击选择选项时，它会打开一个项目页面，我想为用户提供再次重新选择同一项目的选项，从而清除以前的选择

我尝试绑定 NgModel 并将其设置为 null，如下所示：

离子项目选项不显示

 <ion-select mode="md" interface="popover" style="position: absolute; opacity: 0;" #projectSelect
                               (ionChange)="selectProject(projectSelect.value, p)"
[(ngModel)]="selection">
        <ion-select-option *ngFor="let b of p.buildings; let i = index" [selected]="false" [value]="b.buildingName">
                           {{b.buildingName}}                      
        </ion-select-option>

然后在selectProject()我设置

selectProject(buildingName: string, project: Project) {
        // always! reset the selection
        this.selection = null;

但它不会清除选择，并且用户无法重新选择以前选择的选项。

我什至尝试过使用buttonwith(click)=clearSelection()设置selection=null，但无济于事。

我期望清除该选择并允许用户重新选择离子选择。

Answer 1

^4.7.1当我尝试时，这适用于离子：

import { IonSelect } from '@ionic/angular';

// ...

// refer to the select via the template reference
@ViewChild('projectSelect', { static: false }) projectSelect: IonSelect;

selectProject(buildingName: string, project: any) {
  // do stuff
  this.projectSelect.value = '';
}

所以你可以完全删除 ngModel：

<ion-select mode="md" interface="popover" #projectSelect 
    (ionChange)="selectProject(projectSelect.value, p)">
  <ion-select-option *ngFor="let b of p.buildings;" [value]="b.buildingName">
    {{b.buildingName}}
  </ion-select-option>
</ion-select>