Angular beobachtbare combinelatest

Question

Ich versuche, eine Komponente zu erstellen, die auf einen Dienst und eine beobachtbare mit einer Liste von Objekten zurückgeben eine Tabelle, die eine Funktion

hat mein Service zu füllen:

public getTranches(): Observable<Tranche[]> { 
    this.loadTranches(); //this calls the rest API to populate the variable _tranches 
    return this._tranches.asObservable(); // return variable <BehaviourSubject>_tranches asObservable 
    } 

My Component besteht aus einer Tabelle, die die Daten, die durch die Anzeige:

this.subscription = this.apiService 
    .getTranches() 
    .subscribe(
     (data) => { 
     this.tranches = data; 
     } 
); 

html:

<ng-container *ngFor="let tranche of tranches"> 
    // stuff 
</ng-container> 

Up util hier funktioniert alles gut.

habe ich eine Eingabe und klicken Sie auf Ereignisse in den Tabellenüberschriften

//header example for sortby 
<div (click)="this.filters.sortby = name"></div> 

//input for filter 
<input (keyup)="this.filters.search = $event.target.value" type="text"> 

und eine variable Filter, die Informationen zu speichern

können Sie mir zeigen, wie die Filtervariable in einem beobachtbaren zu transformieren und sie verschmelzen zu einem einzigen Abonnement, um die Tabelle zu füttern, so dass ich die Filterung und Sortierung für die Komponente durchführen kann?

Ich habe versucht, Filter als behaviourSubject und verwenden Sie CombineLatest, um sie erfolglos zusammenzuführen, wenn dies der Weg ist, kann ich ein Beispiel sehen?

Answer 1

Wenn ich richtig verstehe, haben Sie eine Klassenvariable _tranches, die ein BehaviorSubject und aussendet, über die next() Methode, ein Array arr von Elementen, die von der Tabelle angezeigt bekommen.

Wenn dies wahr ist, um Filterung zu erreichen, und das Sortieren, haben Sie folgende Dinge zu tun:

• speichern das Array arr irgendwo (zB als eine private Klassenvariable)
• wenn sort oder Filter Befehle von UI abgefeuert werden, gelten filter und sort Methoden zum Array arr
• die Ergebnisse dieser Methoden nehmen und sie als Argumente für die next() Methode des BehaviorSubject

Dann ehrlich verwende ich verstehe nicht, wie die Klick und keyup Ereignisse in Ihrem Code verwaltet werden, Dies hat jedoch keinen Einfluss auf die vorherigen Punkte.

Answer 2

annehmen, dass es aus einer onSearch Funktion bindet an eine Benutzeraktion starten api Anruf

filters=new BehaviorSubject({sortby:'',search:''}) 
onSearch=()=>{ 
filters.map(obj=>{ 
// asume you will need to add a object param in getTranches to deal with sortby and search 
return this.apiService.getTranches(obj) 
}).subscribe(); 
} 

in Ihrem HTML

<div (click)="this.filters.next({sortby:name})"></div> 
<input (keyup)="this.filters.next({search:$event.target.value})" type="text"> 

auslösen