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

问题描述

我有一个远程集合

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

我可以使用 a

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') 挂钩事件(对于 update 和 removed 也是如此) 并使用 Observable.fromPromise(fooAPIService.find()) 或 Observable.fromPromise(fooAPIService.find(123)) 包装 find，但我不知道如何将它们连接起来以产生 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>代码>

First you need to add <ion-infinite-scroll> in between <ion-content>

作为一种可观察的方式，您可以这样实现它:

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 & 中使用分页服务Ionic2 使用 Observables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！