首页 > 解决方案 > 用于视图的 Angular HttpClient 分页

问题描述

我有一个服务,方法如下:

 public getAlerts(page: number, opts?: AlertRequestOptionsInterface): Observable<AlertInterface[]> {
    const path = `/alerts/list`;
    const body = { page: page, ...opts };
    return this._http.post<AlertInterface[]>(path, body, { headers: headers })
        .catch(() => Observable.of(undefined));
}

我将它绑定到我的视图中,如下所示:

@Component({
  selector: 'page-alerts',
  templateUrl: 'alerts.html',
})
export class AlertsPage {

  public alerts: Observable<AlertInterface[]>;
  public subscription: Subscription;
  public loading: boolean = true;

  constructor(private _alerts: AlertsService) { }

  public ionViewDidEnter() {
    this.alerts = this._alerts.getAlerts(1);
    this.subscription = this.alerts.subscribe(() => {
      this.loading = false;
    });
  }

  public ionViewWillLeave() {
     this.subscription.unsubscribe();
  }

}

如果我想分页并将下一页 API 调用附加到我的页面上,我Observable<AlertInterface[]>将如何在视图方面执行此操作?

标签: angularionic-frameworkrxjsangular-httpclient

解决方案


推荐阅读