使用 Observables 在 Angular2 和 Ionic2 中使用分页服务答案

【问题标题】：Consuming paginated service in Angular2 & Ionic2 using Observables使用 Observables 在 Angular2 和 Ionic2 中使用分页服务
【发布时间】：2017-06-08 22:19:32
【问题描述】：

我有一个远程集合

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 的示例，但我无法弄清楚如何将它们正确应用于此用例：

我正在利用 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）连接到事件并使用 Observable.fromPromise(fooAPIService.find()) 或 Observable.fromPromise(fooAPIService.find(123)) 包装 find，但我不知道如何将它们连接起来以生产 ngFor 可以消费的东西。

感谢任何帮助或正确方向的指示！

【问题讨论】：

为什么你的 find() 方法首先返回一个 Promise？您最好从该方法返回一个 Observable，而不是像您建议的那样将方法调用包装在一个 Promise 中。不要这样做：Observable.fromPromise(fooAPIService.find())
一旦你的find() 中有一个 Observable，你可以使用所有的 RxJS 操作符将数据转换为消费者友好的格式之前返回它。这有意义吗？

标签： angular typescript ionic2 rxjs observer-pattern

【解决方案1】：

当您使用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()
    }
  }

【讨论】：

我走上了这条路，但它似乎让我手动管理数组的内容，来自这个回调，以及其他 3 个用于挂钩到 created、updated 和 @987654327 @events，这感觉……错了？这似乎与我在 Angular2 周围看到的情况形成鲜明对比，我的印象是我错过了更好地做到这一点的模式。也许我错了。

【解决方案2】：

首先你需要在<ion-content>之间添加<ion-infinite-scroll>

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

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

}

【讨论】：