如何清除 ng-select selection

Question

是否可以通过编程方式清除 ng-select 下拉列表的 selection？我想要单击清除图标的等效行为，但以编程方式触发。

我期待 clear() 方法或类似的东西，但 documented API 没有任何类似的东西。

这是我的下拉代码：

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>

Answer 1

只需将 ngModel 值设置为 null 即可清除选择。在上面的例子中：

this.selectedCalculation = null;

这与单击清除图标不完全相同，因为它不会触发 (clear) 输出事件，但足以满足我的需要。

Answer 2

@tim 的回答是正确的，但我希望您将其设置为空数组而不是 null 只是为了保存任何循环中断。

this.selectedCalculation = [];

Answer 3

这是来自评论的解决方案：

  // Access ng-select
  @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;

  // Call to clear
  this.ngSelectComponent.handleClearClick();

请注意，handleClearClick 未在文档中公开为 public api 方法，但正如 Tim 提到的那样，它是 public方法，因此可以调用它。

Answer 4

同意@tim 和@AlexOnozor，我已经成功地将 'selectedCalculation' 用作 'string'、'string[]'、'object[]' 和 Reactive Forms（以及 'string' 和 ngModel ）并且您建议的方法运行顺利。我也尝试使用 'handleClearClick' 但失败了。如果我找到方法会更新。

因此，this.selectedCalculation = '' 或 this.selectedCalculation= []（对于 multipleSelect = true）应该有效。

Answer 5

假设下面是最初发布的代码示例。

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>

selectedCalculation 变量创建为数组而不是字符串，因为 ng-select 可以允许多个值被 selected if [multiple]="true"已设置。

要以编程方式清除数组中的 selected 值，请使用：

this.selectedCalculation = [];

如需清空绑定物品，使用：

this.calculationOptions = [];

以上两个都可以通过在 HTML.

中添加（更改）处理程序来完成

(change)="change($event)

你的 TypeScript 中有这样的东西。

change(event: any): void {
   this.calculationOptions = [];
   this.selectedCalculation = [];
  }

Answer 6

我一直在寻找相同的模板，但要在 ng-select 之外调用它。因此，按照接受的答案，以下内容对我来说效果很好。 ^_^

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           (clear)="resetCalculations();"
           [(ngModel)]="selectedCalculation" #selectDropdown>
</ng-select>

<input type="button" (click)="selectDropdown.handleClearClick()">

This also makes sure the resetCalculations() being called.

Answer 7

即使认为@Buczkowski 的回答很清楚 ng-select，它也确实关注输入，但并非所有情况都需要输入。所以我使用了其他方法：clearModel

  // Access ng-select
  @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;

  // Call to clear
  this.ngSelectComponent.clearModel();

因此，如果您只需要清除输入，请使用 clearModel 方法。否则，如果需要聚焦和清除，请使用 handleClearClick.

Answer 8

最佳答案是清除特定操作的输入字段。我也根据自己的需要在我的项目中使用了这段代码。

在HTML中写下这段代码：

<ng-select [items]="products" #ngSelectComponent
           bindLabel="name"
           placeholder="Enter Product Name /SKU/ Scan Barcode"
           appendTo="body"
           name="selectedProduct"
           id="selectedProduct"
           (change)="productChange($event)"
           [multiple]="false"
           ([ngModel])="selectedProduct" >

<input type="button" (click)="clearValue()">

在 .TS 文件中为此控件添加一个 ViewChild，这样如果您的屏幕由多个 ngSelect 元素组成，那么您可以清除特定的 ngSelect 值。

@ViewChild('ngSelectComponent') ngSelectComponent: NgSelectComponent;

clearValue(){
  this.ngSelectComponent.clearModel(); 
  // This line will clear the value of ngSelect control. 
  // You can write code according to your requirement.
}

Answer 9

我遇到了同样的问题，意识到你唯一需要做的就是将你分配给 [items] 的 calculationOptions 设置为一个空数组，即你的 .ts 中的 []文件。

现在，您似乎在要求某人将您的 calculationOptions 设置为 []。 clear() 功能不存在的原因是有道理的。

如何清除 ng-select selection

How to clear ng-select selection

angular-ngselect

angular