Filtrar listas en Angular con RxJs
Supón que tienes un observable que contiene una lista de elementos y que tienes un text input control. Quieres que cuando el usuario escriba algo en el input control tu lista se filtre automáticamente (ten en cuenta que el filtro se aplica en el cliente, no en el servidor). Puedes utilizar el operador
combineLatest para filtrar tu lista:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@Component({ selector: 'article-list', template: ` <div> <mat-form-field> <input matInput placeholder="Filter by article title" [formControl]="filter"> </mat-form-field> <article-table [articles]="filteredArticles$ | async"></article-table> </div> `, styleUrls: [] }) export class ArticleListComponent { filteredArticles$: Observable<Article[]>; filter: FormControl = new FormControl(''); constructor(private articleService: ArticleService) { this.filteredArticles$ = combineLatest( this.articleService.findAllArticles(), this.filter.valueChanges.pipe(startWith('')) ).pipe( map(([articles, filterString]) => articles.filter(article => article.title.indexOf(filterString) !== -1)) ); } } |
Comentarios recientes