Cómo usar el tiempo de rebote en una búsqueda de entrada angular mientras busca en la lista de elementos. ¿Debería usar RXJS y cómo ponerlo en mi función filterReports? ¿Puedes mostrarme en código lo que debo hacer? Código aquí:
protected reports: Array<ReportGroupModel> = []; protected filteredReports: Array<ReportGroupModel> = []; constructor( protected route: ActivatedRoute, protected httpService: HttpService ) { super(route); this.titleIcon = 'fa-bar-chart'; this.titleSufixKey = 'reports'; this.filterReports = debounce(this.filterReports, 500); } filterReports(filter: any) { const searchText = filter.target.value?.toUpperCase(); if (searchText) { let newFilteredReports: Array<ReportGroupModel> = []; for (let reportGroup of this.reports) { let foundItems = reportGroup.items.filter(x => x.title.toUpperCase().includes(searchText)); if (foundItems && foundItems.length > 0) { newFilteredReports.push(new ReportGroupModel(reportGroup.header, foundItems)); } } this.filteredReports = newFilteredReports; } else this.filteredReports = this.reports; } ngOnInit() { super.ngOnInit(); this.filteredReports = this.reports; }y aquí está html
<div class="d-flex"> <input search="text" class="form-control mw-200p ml-auto" (keyup)="component.filterReports($event)" autofocus placeholder="{{ 'search' | translate }}"/> </div> <div class="d-flex flex-wrap pl-2"> <div *ngFor="let report of component?.filteredReports" class="pr-5 pt-2" style="width: 350px;"> <h3>{{report.header | translate}}</h3> <ul class="list-unstyled pl-1"> <li *ngFor="let item of report.items"> <i class="fa {{item.icon}} mr-h"></i> <a class="link" [routerLink]="item.path"> {{item.title}} </a> <p *ngIf="item.description" class="text-muted">{{item.description}}</p> </li> </ul> </div> </div>La forma más fácil de resolver este problema es usar el módulo de formulario reactivo. sin embargo, si desea seguir con ngModel, puede hacer algo como esto.
searchChanged = new Subject(); protected reports: Array<ReportGroupModel> = []; protected filteredReports: Array<ReportGroupModel> = [];y actualice el tema cada vez que se actualice el evento keyup
<div class="d-flex"> <input search="text" class="form-control mw-200p ml-auto" (keyup)="onKeyUp($event)" autofocus placeholder="{{ 'search' | translate }}"/> </div> //.ts onKeyUp(value: string) { this.searchChanged.next(value) }Ahora, puede usar el asunto searchChanged para eliminar el rebote de la actualización del evento.
constructor( protected route: ActivatedRoute, protected httpService: HttpService ) { ... this.searchChanged.pipe( debounceTime(300) // You better add takeUntil or something to unsubscribe this observable when this component destroy ).subscribe(value => { this.filterReports(value); }) }