¿Cómo puedo recuperar una función que se llama en un evento "keyUp"?
Aquí está mi código:
mi funcion
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 }); }mi html
<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)"> Básicamente, lo que estoy tratando de lograr es que se llame a handleSearch unos momentos después de que el usuario deje de escribir.
Descubrí que puedo usar _debounce _debounce() de lodash para esto, pero no he descubierto cómo poner esto en mi evento keyUp .
ACTUALIZACIÓN: Usando el operador de tubería RXJS 6:
this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); });Puede crear un rxjs/Subject y llamar a .next() en keyup y suscribirse a él con el tiempo de rebote deseado.
No estoy seguro de si es la forma correcta de hacerlo, pero funciona.
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)">Una actualización para Rx/JS 6. Uso del operador de tuberías.
import { debounceTime } from 'rxjs/operators'; this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); });Todo lo demás es igual 👍
Eche un vistazo a la respuesta aquí: https://stackoverflow.com/a/35992325/751200
Y artículo aquí: https://blog.thoughtram.io/angular/2016/01/06/take-advantage-of-observables-in-angular2.html (bastante antiguo, pero bueno).
Básicamente, puede usar un objeto Observable proporcionado por Angular Forms.
Por ejemplo, this.myFormGroup.get("searchText").valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(...)
Si necesita realizar una solicitud HTTP cuando el usuario deja de escribir, puede colocar dicha llamada HTTP en el operador switchMap y agregarla a la lista de pipe :
this.myFormGroup.get("searchText") .valueChanges .pipe(debounceTime(500), distinctUntilChanged(), switchMap((value: string) => { return this.service.getData(value); })) .subscribe((valueFromRest) => { ... }); La magia en switchMap cancelará automáticamente la solicitud HTTP anterior (si aún no se ha completado) e iniciará una nueva automáticamente.