Выберите все, кроме данных, основанных на поиске

Question

У меня небольшая проблема с выбором всех, я скопировал код из https://stackblitz.com/edit/angular-t2ay62?file=src / template-header-footer-example.component. html. но я хочу сделать выбор всех на основе значения в поиске.

например, у меня есть данные 5 [A, BA, C, D, E], и я ищу только букву A, затем Появятся данные [A, BA], и когда я нажму «Выбрать все», будут выбраны только данные [A, BA], а не все данные.

Answer 1

В ng-select есть выходное событие, называемое search. Вы можете использовать это для фильтрации данных

Вы можете сделать следующие изменения в своем TS и html Я добавил еще одно свойство в класс activePeople, который будет хранить отфильтрованные данные.

TS

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
    selector: 'template-header-footer-example',
    templateUrl: './template-header-footer-example.component.html',
    styleUrls: ['./template-header-footer-example.component.scss']
})
export class TemplateHeaderFooterExampleComponent implements OnInit {

people = [];
selectedPeople = [];

activePeople = [];

constructor(private dataService: DataService) {
}

ngOnInit() {
    this.dataService.getPeople().subscribe(items => {
        this.people = items;
        this.activePeople = items;
    });
}

selectAll() {
    this.selectedPeople = this.activePeople.map(x => x.name);
}

unselectAll() {
    this.selectedPeople = [];
}

onSearch(event) {
  this.activePeople = event.items;
}

}

HTML

<ng-select
[multiple]="true"
[items]="people"
[(ngModel)]="selectedPeople"
placeholder="Select people"
bindLabel="name"
bindValue="name"
(search)="onSearch($event)">

Вы можете найти больше таких событий на https://github.com/ng-select/ng-select/blob/master/src/demo/app/examples/output-events-example/output-events-example.component.html