使用 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)的新手，我正试图找出如何根据最佳实践来使用它。我一直在看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可以使用的东西。

如有任何帮助或指示，我们将不胜感激！

Answer 1

首先需要在<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();
}
}

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