获取http调用承诺中返回的数据的Rxjs Observable

Question

我正在尝试使用 ngx-pagination，但遇到的问题很少。我是 angular 2 的新手，对可观察对象和订阅者知之甚少。

我有一项服务可以进行 http 调用和 returns 数据：

getData(path: string, page: number=1) : Promise<IData[]> {

  return this.http.get(path+'&pageNumber='+page)
                    .toPromise()
                    .then(response => {
                        return response.json() as IData[];
                    });
}

我正在我的组件中使用这些数据：

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
    });
}

我的模板如下所示：

<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>

我知道这是不正确的，因为我需要等待承诺解决，但我不知道该怎么做。 ngx-pagination 期望 Observable 所以 asyncData 需要是一个 Observable

Answer 1

如果您查看旧 Angular http 服务（您正在使用的服务，较新的称为 HttpClient）的 'get' 方法的类型签名，您会看到它 returns 一个 'Response'.

类型的 Observable

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

因此，只需从 get 调用中删除 .toPromise() 和 .then 方法，您就可以使用 Observable。

获取http调用承诺中返回的数据的Rxjs Observable

Getting Rxjs Observable of data returned in http call promise

promise

rxjs

angular-promise

angular2-observables

angular