Ich versuche, ngx-Pagination verwenden, aber mit wenigen Problemen konfrontiert. Ich bin ziemlich neu in Winkel 2 und weiß nicht viel über Observable und Abonnenten.Getting Rxjs Observable von Daten in HTTP-Call-Versprechen zurückgegeben
Ich habe einen Dienst, der http Anrufe macht und gibt die Daten:
getData(path: string, page: number=1) : Promise<IData[]> {
return this.http.get(path+'&pageNumber='+page)
.toPromise()
.then(response => {
return response.json() as IData[];
});
}
Ich raubend diese Daten in meiner Komponente:
getDataValues(page: number) {
this.loading = true;
this.asyncData = this.getAsyncData(this.queryPath, page)
.do(res => {
this.total = res.total;
this.p = page;
this.loading = false;
})
.map(res => res.items);
}
getAsyncData(path: string, page: number): Observable<any> {
return Observable
.of({
items: this.repository.getData(path, page),
total: this.dataValues.length
});
}
Und meine Vorlage sieht wie folgt aus:
<div class="list">
<div>
<article class="entity" *ngFor="let data of asyncData | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">
</article>
</div>
<pagination-controls (pageChange)="getDataValues($event)" id="server"></pagination-controls>
Ich weiß, dass das nicht stimmt, da ich auf das Versprechen warten muss, aber ich weiß nicht, wie ich das machen soll. NGX-Paginierung erwartet beobachtbare so asyncData
Bedürfnisse ein Observable
Der Steuerungsfluss wird unordentlich, wenn Sie Observable und Versprechungen mischen. Normalerweise passiert das, wenn ein Entwickler mit RxJS nicht komfortabel genug ist. Tun Sie das nicht, es sei denn, Sie brauchen das wirklich und bleiben auf dem gemeinsamen Nenner (Observable). Btw, Code oben funktioniert nicht wie erwartet, in getAsyncData wird erwartet, dass 'Elemente' Werte sind, aber sie sind ein Versprechen von Werten (oder ein Observable von Werten, wenn Sie toPromise loswerden, wie die Antwort suggeriert). – estus