Как сбросить 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('','');
}

Используя select, я фильтрую данные. Фильтрация работает нормально. Кнопка «Очистить» тоже подойдет, просто пользовательский интерфейс показывает крестик, как показано ниже:

Можете ли вы помочь мне в этом вопросе?

Answer 1

Поскольку вы используете двустороннее связывание [(ngModel)]:

<ng-select 
           (change)="setFilter('','')" 
           [items]="eventType"
           bindLabel="name"
           bindValue="id"
           placeholder="Select Event Type"
           [(ngModel)]="event_type" 
           id="eventType">
</ng-select>

В вашем компоненте необходимо добавить пустое значение и установить [(ngModel)] на желаемое значение в clearFilter() метод:

event_type: any;

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

clearFilter(){
    this.event_type = this.eventType[0];
}

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('','');
}