Observable - EventEmitter anhören & initial ausgeben

Question

Ich versuche gerade eine Tabelle aus der zu implementieren.

Ich brauche Paginierung umfassen & Sortierung, so folgte ich dem Beispiel vorgesehen "Table mit sorting" &"Table mit Paginierung".

Der Unterschied, den ich habe, ist, dass meine Daten von einem REST-Endpunkt mit dem HttpClient erhalten, dass Angular bietet.

---

Dies ist der aktuelle Code (vereinfacht):

Service:

@Injectable() 
export class DataService { 
    constructor(private http: HttpClient) { 
    } 

    getData(page: number, size: number, sort: string): Observable<Data[]> { 
    const params = new HttpParams() 
     .set('page', String(page)) 
     .set('size', String(size)) 
     .set('sort', String(sort)); 
    return this.http.get<Data[]>('/api/v1/data', {params: params}); 
    } 
} 

Datasource:

export class DataDataSource extends DataSource<Data> { 

    constructor(private dataService: DataService, private sort: MdSort, private paginator: MdPaginator) { 
    super(); 
    } 

    connect(collectionViewer: CollectionViewer): Observable<Data[]> { 
    const displayDataChanges = [ 
     this.sort.mdSortChange, 
     this.paginator.page 
    ]; 

    return Observable.merge(...displayDataChanges).flatMap(() => { 
     let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc'); 
     return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr); 
    }); 
    } 

    disconnect(collectionViewer: CollectionViewer): void { 
    } 
} 

---

eigentliche Frage

Im Beispiel wird ein Behaviour wird verwendet, um die Datenänderungen eine Event zum Observable jedes Mal zu emittieren. Da ich einen REST-Endpunkt verwende, habe ich dieses Verhalten nicht.

Folglich ist die angezeigte Tabelle leer, bis ein Paginierungs- oder Sortierereignis ausgegeben wird.

Wie triggert ich zuerst den Teilnehmer (die Tabelle), um zuerst die Daten zu laden?

---

Ich bin sehr neu in JavaScript & Rx, so entschuldige ich mich bereits im Voraus, wenn dies eine dumme Frage :)

Answer 1

Ich habe selbst eine Lösung gefunden.

---

Das Problem war nicht, dass die Observable kalt war, wie die Tabelle in die Observable abonniert eigentlich schon nach dem Aufruf von connect().

---

Das Problem war, dass die zurück Observable natürlich hätte keine Ereignisse emittieren, bis eine Art oder Paginierung passiert ist (aufgrund der merge()).

---

Die Lösung war ein Trigger hinzuzufügen, um die Daten zu aktualisieren aufgerufen werden können:

export class DataDataSource extends DataSource<Data> { 

    private dataChange: EventEmitter<void> = new EventEmitter<void>(); 

    constructor(private dataService: DataService, private sort: MdSort, private paginator: MdPaginator) { 
    super(); 
    } 

    public refreshData(): void { 
    this.dataChange.next(null); 
    } 

    connect(collectionViewer: CollectionViewer): Observable<Data[]> { 
    const displayDataChanges = [ 
     this.sort.mdSortChange, 
     this.paginator.page, 
     this.dataChange 
    ]; 

    return Observable.merge(...displayDataChanges).flatMap(() => { 
     let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc'); 
     return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr); 
    }); 
    } 

    disconnect(collectionViewer: CollectionViewer): void { 
    } 
} 

Answer 2

ist

die beobachtbaren Sie erstellt haben, ist zur Zeit kalt, da es nicht zu werden abonniert zu. Sie sollten die Observable abonnieren können, indem Sie Folgendes tun.

Observable.merge(...displayDataChanges).flatMap(() => { 
     let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc'); 
     return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr); 
    }).subscribe(
     (result) => //do something, 
     (err) => //do something 
    ); 

Bei der Einleitung und in einer Komponente zu einer beobachtbaren abonnieren möchte, ist es wichtig von den beobachtbaren austragen zu erinnern, nachdem die Komponente zerstört wird sonst wird es heiß bleiben. Um dies zu tun, setze die Subskription auf eine Methode: