如何清除ng-select选择

Question

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

我期待有一种clear()方法或类似的方法，但是文档化的API在这些方面没有任何内容。

这是我的下拉代码：

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

Answer 1

这是评论的解决方案：

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

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

请注意，handleClearClick文档中未将其公开为公共api方法，但是正如Tim所提到的，它是公共方法，因此可以调用它。

Answer 2

我正在寻找相同的但模板以在外部调用它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 3

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

this.selectedCalculation = null;

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