Question

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

我期望使用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

这是评论的解决方案：

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

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

请注意，handleClearClick在文档中并未公开为公共api方法，但是 Tim 提到它是公共方法，因此可以调用它。

Answer 3

我一直在寻找相同的东西，但需要模板在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()">

这还可以确保调用resetCalculations()。

Answer 4

就像@tim答案是正确的，但我更希望您将其设置为空数组而不是null，以节省循环中断。

this.selectedCalculation = [];

Answer 5

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

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

Answer 6

假设下面是原始发布的代码示例。

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

selectedCalculation变量是作为数组而不是字符串创建的，因为如果设置了[multiple]="true"，则ng-select可以选择多个值。

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

this.selectedCalculation = [];

是否需要清除绑定的项目，请使用：

this.calculationOptions = [];

以上两项均可通过在HTML中添加（更改）处理程序来实现。

(change)="change($event)

在TypeScript中是这样的。

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

Answer 7

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

在 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 8

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

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

Answer 9

即使@Buczkowski答案可以清除ng-select，它也专注于输入，并非所有情况都需要输入。所以我用了另一种方法：clearModel

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

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

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

如何清除ng-select选择

9 个答案: