1
votes

Comment ajouter du temps anti-rebond à la zone de recherche d'entrée dans le typographie?

Comment puis-je ajouter du temps anti-rebond au champ de recherche dynamique qui recherche des données sur les données de table? J'ai regardé une solution sur le site mais mon code est un peu différent, je n'utilise aucune manette des gaz ou autre chose donc je suis juste confus.

mon code de modèle:

filterData(filterValue: string) {
    this.applyFilter(filterValue).pipe(debounceTime(2000))
}

javascript typescript angular

6 commentaires

Jetez un œil à cette question .

Double possible de Rxjs anti-rebond sur le composant d'entrée de texte de réaction

non, ils ne sont pas les mêmes je pense.

Non, ils sont complètement les mêmes.

J'ai déjà essayé comme dans les réponses que vous avez suggérées mais pipe, abonnez-vous, oberve n'existe pas sur le type d'erreur void vient. J'ai essayé comme dans la mise à jour de la question dans la dernière partie.

Utilisation d'un FormControl stackover. com / questions / 50732416 /…

3 Réponses :

3
votes

Template:

private terms$ = new Subject<string>();

ngOnInit () {
  this.terms$.pipe(
    debounceTime(400), // discard emitted values that take less than the specified time between output
    distinctUntilChanged() // only emit when value has changed
  ).subscribe(term => {
    // do your search with the term
  });
}

Composant:

<input matInput (input)="terms$.next($event.target.value)" type="text" 
  placeholder="Search element">

0 commentaires

2
votes

Vous utilisez un opérateur de tube sur une chaîne. Vous ne pouvez utiliser un tube que sur un observable. Vous devez donc créer un Sujet dans votre composant. Subject dans RxJS agit à la fois comme observable et comme observateur. En d'autres termes, il émet la valeur et écoute cette valeur lorsque la valeur change.

private searchSub$ = new Subject<string>();

applyFilter(filterValue: string) {
    this.searchSub$.next(filterValue)
}

ngOnInit() {
   this.searchSub$.pipe(
     debounceTime(400),
     distinctUntilChanged()
   ).subscribe((filterValue: string) => {
     this.tableDataSource.filter = filterValue.trim().toLowerCase();
   });
}

Lorsque la méthode applyFilter () appelle à chaque pression de touche, le sujet émet le filterValue. Dans votre ngOnInit () , vous devez écouter / vous abonner à votre sujet, vous pouvez donc y utiliser l'opérateur pipe et debounceTime .

0 commentaires

1
votes

Utilisez simplement lodash-decorators et lodash

import { Debounce } from 'lodash-decorators';

class AnyClass {
  constructor() {
    ...
  }

  @Debounce(100)
  filterData(filterValue: string) {
    ...
  }
}

0 commentaires