在Angular2&amp ;;中使用分页服务Ionic2使用Observables [英] Consuming paginated service in Angular2 & Ionic2 using Observables

问题描述

我有一个远程集合

interface Foo {
  id: string;
  properties: any;
}

我可以使用

class FooAPIService {
  find(skip = 0): Promise<Foo[]> {
    // promises at most 5 Foos. to get more, use skip > 1
    // pagination is server side
  }

  on(event: string, callback: (foo: Foo) => any) {
    // registers event handler, for events: created, updated, removed
    // events triggered when a change occurs server side
  }
}

作为Angular2（和Ionic2）的新手，我正在尝试根据最佳实践来弄清楚如何使用它。我一直在看Observables的例子，但是我无法弄清楚如何正确地将它们应用到这个用例：

As a newcomer to Angular2 (and Ionic2), I'm trying to figure out how to consume this according to best practices. I've been looking at examples of Observables, but I'm having trouble figuring out how to apply them correctly to this use case:

我正在制作一个页面无限滚动，利用Ionic的InfiniteScroll组件：

I'm producing a page with endless scroll, leveraging Ionic's InfiniteScroll component:

@Component({
  selector: 'page-foo-list',
  template: `
    <ion-list>
      <ion-item *ngFor="let foo of foos">{{foo}}</ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  `
})
class FooListPage {
  private foos;

  doInfinite(infiniteScroll) {
    // do something async to fetch more Foos,
    // then call infiniteScroll.complete()
  }
}

我知道我可以使用 Observable.fromEvent（fooAPIService， 'created'）（同样用于更新& 已移除）并包装使用查找 Observable.fromPromise（fooAPIService.find（））或 Observable.fromPromise（fooAPIService.find） （123）），但我无法弄清楚如何将它们连接起来以产生 ngFor 可以消耗的东西。

I know I can hook into the events using Observable.fromEvent(fooAPIService, 'created') (same for update & removed) and wrap the find using Observable.fromPromise(fooAPIService.find()) or Observable.fromPromise(fooAPIService.find(123)), but I can't figure out how to hook them up to produce something ngFor can consume.

任何正确方向的帮助或指示都会受到赞赏！

Any help or pointers in the right direction are appreciated!

推荐答案

首先你需要添加< ion-infinite-scroll> 介于< ion-content>

作为Observable时尚，您可以这样实现：

As a Observable fashion you can implement it like this:

@Component({
  selector: 'page-foo-list',
  template: `
  <ion-content padding>
    <ion-list>
      <ion-item *ngFor="let foo of foos">{{foo}}</ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="infiniteScrolling$.next($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
  `
})
class FooListPage implements OnInit, OnDestroy {
  private foos;
  private infiniteScrolling$: Subject<any> = new Subject();
  private fooApiService$: Observable<any>;
  private destroy$ : Subject<any> = new Subject();

  constructor(public fooAPIService : FooAPIService){}

  ngOnInit(){

    this.fooApiService$ = Observable
      .fromPromise(this.fooAPIService.find())
      .map(foos => this.foos = foos);

    this.infiniteScrolling$
      .takeUntil(this.destroy$)
      .delayWhen(() => this.fooApiService$)
      .map(infiniteScroll => infiniteScroll.complete())
      .subscribe();

  }

  ngOnDestroy(){
    this.destroy$.next();
    this.destroy$.unsubscribe();
  }

}

这篇关于在Angular2&amp ;;中使用分页服务Ionic2使用Observables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！