angular - 清除 ngx-mat-select-search 的选定值

Question

我正在为 Angular 使用 "ngx-mat-select-search" npm 包，我希望为我的应用程序的用户提供默认的“无”选项，或者在选择一个项目，我想让用户能够清除项目并让下拉列表返回到其原始状态，仅显示输入的占位符。

截至目前，当我从 ngx-mat-select-search 中选择一个项目时，我似乎无法找到删除该项目并清除选择的方法。有什么办法可以做到这一点，也许我错过了什么？

这是 ngx-mat-select-search 的文档/演示的链接 - click here .如您所见，一旦选择了某个项目，似乎就无法将其删除。

如有任何帮助和/或建议，我们将不胜感激。

谢谢!

Answer 1

我做到这一点的最好方法是将一个虚拟的“无”选择作为一个单独的 <mat-option> .

<mat-form-field>
<mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
  <mat-option>
    <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
  </mat-option>

  <mat-option>None</mat-option>

  <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
    {{bank.name}}
  </mat-option>
</mat-select>

因为它没有任何值(value)，所以当您选择它时，它只是返回到占位符。

这与 Material 团队在其 docs 中推荐的方法相同并在相应的 stackblitz 中.