0

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

+0

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

Antwort

0

Wenn man sich die Art Signatur aussehen sein für die ‚get‘ Methode des alten Angular http-Dienst (die, die Sie verwenden, ist die neuere Version ist Httpclient genannt), Sie werden sehen, dass es ein Observable vom Typ 'Response' zurückgibt.

get(url: string, options?: RequestOptionsArgs): Observable<Response>; 

Entfernen So einfach die .toPromise() und .then Methoden aus dem get Anruf werden Sie mit den beobachtbaren verlassen.