angular - 清除 ionic 选择选项

Question

我有一个带有动态生成的 ionic 选择选项的 ionic 选择。有时可能只有一个 ionic 选择选项(例如，因为用户只创建了一个项目)可用于 ionic 选择。

当用户单击一个选择选项时，它会打开一个项目页面，我想让用户重新选择相同的项目，从而清除之前的选择

我已经尝试绑定(bind)一个 NgModel 并将其设置为 null :

ion-item-options not displaying

 <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;

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

我什至尝试过 button与 (click)=clearSelection()设置 selection=null无济于事。

我期待选择被清除并允许用户重新选择 ionic 选择。

Answer 1

这适用于 ionic ^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>