如何在角度重置ng-select

Question

当我单击清除按钮时，我想重置ng-select，代码如下：

<ng-select (change)="setFilter('','')" 
           [items]="eventType"
           bindLabel="name"
           bindValue="id"
           placeholder="Select Event Type"
           [(ngModel)]="event_type" id="eventType">
</ng-select>
<button class="acq-btn acq-btn-default"(click)="clearFilter()">Clear</button>

我创建的函数如下：

eventType = [
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = '';
    this.setFilter('','');
}

使用选择我正在过滤数据。过滤工作正常。 清除按钮也很好，只是UI会显示十字符号，如下所示：

您能帮我解决这个问题吗？

Answer 1

在使用两种方式绑定INTERVAL 1 MONTH时：

[(ngModel)]

在您的组件中，必须添加空值，并通过<ng-select (change)="setFilter('','')" [items]="eventType" bindLabel="name" bindValue="id" placeholder="Select Event Type" [(ngModel)]="event_type" id="eventType"> </ng-select> 方法将[(ngModel)]设置为所需的值：

clearFilter()

Answer 2

例如，如果您可以将下拉菜单设置为默认的“创建”，则可以这样操作：

eventType = [
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = 'create';
    this.setFilter('','');
}

或者，您可以提供一个空白选项：

eventType = [
    {id: '', name: ''},
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = '';
    this.setFilter('','');
}