使用Observables在Angular2和Ionic2中使用分頁服務

Question

我有一個遠程收藏

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）的新手，我正在嘗試找出如何根據最佳實踐來使用它。 我一直在觀察Observable的示例，但是在弄清楚如何將其正確應用於此用例時遇到了麻煩：

我正在利用Ionic的InfiniteScroll組件生成具有無限滾動的頁面：

@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 ），敷find使用Observable.fromPromise(fooAPIService.find())或Observable.fromPromise(fooAPIService.find(123)) ，但我不知道如何將它們連接起來以產生ngFor可以消耗的東西。

如有任何幫助或朝正確方向的指點，不勝感激！

Answer 1

首先，您需要在<ion-content>之間添加<ion-infinite-scroll> <ion-content>

作為一種可觀察的方式，您可以像這樣實現它：

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

}

Answer 2

當您使用Promise找到Foo你可以使用then

  doInfinite(infiniteScroll) {
    this.fooAPISerivice.find().then((data)=>{
      this.foos.push(data);
    // do something async to fetch more Foos,
    // then call infiniteScroll.complete()
    }
  }