0
J'essaie d'utiliser ngx-pagination mais je suis confronté à quelques problèmes. Je suis assez nouveau à angulaire 2 et ne sais pas beaucoup sur les observables et les abonnés.Obtention de Rxjs Observable des données renvoyées dans la promesse d'appel http
J'ai un service qui effectue des appels http et renvoie les données:
getData(path: string, page: number=1) : Promise<IData[]> {
return this.http.get(path+'&pageNumber='+page)
.toPromise()
.then(response => {
return response.json() as IData[];
});
}
Je consommais ces données dans mon élément:
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
});
}
Et mon modèle ressemble à ceci:
<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>
Je sais que ce n'est pas correct puisque j'ai besoin d'attendre la promesse de résoudre mais je ne sais pas comment faire ça. NGX-pagination attend Observable donc asyncData doit être un Observable
Le flux de contrôle devient salissant lorsque vous mélangez des observables et des promesses. Habituellement, cela arrive quand un dev n'est pas assez à l'aise avec RxJS. Ne faites pas cela à moins d'en avoir vraiment besoin et de vous en tenir au dénominateur commun (observables). Btw, le code ci-dessus ne fonctionnera pas comme prévu, dans getAsyncData on s'attend à ce que 'items' soit des valeurs, mais elles sont une promesse de valeurs (ou un observable de valeurs, si vous voulez vous débarrasser de toPromise, comme le suggère la réponse). – estus