清除 ngx-mat-select-search 的 selected 值

Question

我正在为 angular 使用 "ngx-mat-select-search" npm 包，我希望为我的应用程序的用户提供默认的 "None" 选项，或者在 select 之后在查看一个项目时，我想让用户能够清除该项目并将下拉列表 return 恢复到其原始状态，仅显示输入的占位符。

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

这里是 link 到 ngx-mat-select-search - click here 的 documentation/demo。如您所见，一旦某个项目被 selected，似乎就无法将其删除。

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

谢谢！

Answer 1

我做到这一点的最好方法是将虚拟 "None" selection 作为单独的 <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>

因为它没有任何价值，所以当您 select 它时，它只是回到占位符。

这与 Material 团队在 docs and in their corresponding stackblitz 中推荐的方法相同。

清除 ngx-mat-select-search 的 selected 值

Clearing out selected value for ngx-mat-select-search

angular

angular-material2