web-dev-qa-db-fra.com

Angular 2 - Diffuser un événement KeyUp

Comment puis-je annuler une fonction qui est appelée lors d'un événement "keyUp"?

Voici mon code:

Ma fonction 

private handleSearch(searchTextValue: string, skip?: number): void {
    this.searchTextValue = searchTextValue;
    if (this.skip === 0 || typeof skip === "undefined") {
        this.skip = 0;
        this.pageIndex = 1;
    } else {
        this.skip = skip;
    }
    this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage });
}

Mon HTML 

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">

Bassiquement, ce que j'essaie de faire, c'est que handleSearch soit appelée quelques instants après que l'utilisateur cesse de taper. 

J'ai découvert que je pouvais utiliser la fonction _debounce() de lodash pour cela, mais je n'ai pas trouvé comment mettre cela sur mon événement keyUp.

angularlodashdebounce
9
Nicolas

Vous pouvez créer un sujet/rxjs et appeler .next () sur keyup et vous y abonner avec le délai souhaité.

Je ne suis pas sûr que ce soit la bonne façon de le faire mais cela fonctionne.

private subject: Subject<string> = new Subject();

ngOnInit() {
  this.subject.debounceTime(500).subscribe(searchTextValue => {
    this.handleSearch(searchTextValue);
  });
}

onKeyUp(searchTextValue: string){
  this.subject.next(searchTextValue);
}

HTML:

<input (keyup)="onKeyUp(searchText.value)">
22
Ploppy

Une mise à jour pour Rx/JS 6. À l'aide de l'opérateur de canalisation.

import { debounceTime } from 'rxjs/operators';

this.subject.pipe(
      debounceTime(500)
    ).subscribe(searchTextValue => {
      this.handleSearch(searchTextValue);
    });

Tout le reste est identique ????

3
Arron McCrory