Comment filtrer une observable à l'aide d'un observable

Question

J'ai un composant qui est utilisé pour afficher une liste de tableaux de bord à partir d'un observable. Maintenant, l'utilisateur a besoin de la possibilité de chercher dans cette liste, mais en raison de la petite taille, je préfère faire ce côté client.

Pour obtenir ce travail j'ai ajouté trois à la composante observables

@Input() dashboards: Observable<Dashboard[]>; // dashboards 

term = new Subject<string>(); // search term 
results: Observable<Dashboard[]>; // actual dashboard to display 

Pour configurer les résultats observables j'utiliser le code suivant.

ngOnInit(): void { 
    this.results = this 
     .term 
     .distinctUntilChanged() 
     .share() 
     .switchMap(term => { 
      return this.getDashboards(term); 
     }) 
     .share(); 
} 

private getDashboards(term) { 
    return this.dashboards 
     .map((dashboards: Dashboard[]) => { 
      return dashboards.filter(
       this.getFilter(term) 
      ); 
     }); 
} 

private getFilter(term) { 
    term = term.toLowerCase(); 
    return (dashboard: Dashboard) => { 
     // filter logic 
    }; 
} 

Dans le modèle que je donne les résultats suivants

<input 
    [disabled]="(dashboards | async)?.length < 1" 
    (keyup)="term.next($event.target.value)" 
    type="search" 
> 
<ul> 
    <li *ngFor="let dashboard of (results | async)"> 
     {{dashboard.name}} 
    </li> 
</ul> 

Sur rien de charge est affiché, mais lors de la saisie de la liste est affichée et être filtré.

Donc, ma question, est-ce le chemin à parcourir ou est-ce si loin, en second lieu si c'est la bonne façon, comment puis-je être sûr que sur le chargement des données est montré?

Answer 1

Donc, après d'autres choses observables, j'ai appris de nouvelles choses d'observables.

J'ai d'abord changé le terme en un BehaviorSubject avec une chaîne vide par défaut. Cela signifie qu'il y a toujours un événement émis et disponible.

term = new BehaviorSubject<string>(''); // search term 

suivant a été l'utilisation de combineLatest. Celui-là peut être utilisé pour utiliser une seconde observable. Le code pour obtenir le results est alors devenu comme suit;

this.results = this 
     .dashboards 
     .combineLatest(
      this.term 
     ) 
     .map((data) => { 
      return data[0].filter(this.getFilter(
       data[1] 
      )); 
     }) 
     .share(); 

La méthode getDashboards pourrait être abandonné