ngx-pagination angular 8 Observables 下一页未在 FE 上填充答案

【问题标题】：ngx-pagination angular 8 Observables next page not populating on FEngx-pagination angular 8 Observables 下一页未在 FE 上填充
【发布时间】：2021-02-09 15:39:37
【问题描述】：

我对此实现中使用的 Observables 有疑问。我是 Observables 的新手。我正在使用用户列表对现有组件实施 ngx-pagination。问题是下一页没有填充结果（只有第 1 页有 10 个第一个结果），但是正在调用 API，我可以在“网络”选项卡中看到结果。我认为这与 Observables 有关。任何帮助将不胜感激。

组件

  pageSize: any;
  pageNumber = 1;
  count = 0;

 ngOnInit() {
    this.users$ = this.userapiService.getUsers(this.pageNumber);
  }

  handlePageChange(event) {
    this.pageNumber = event;
    this.users$ = this.userapiService.getUsers(this.pageNumber);
  }

html


      <tr *ngFor="let user of users$.getValue() | paginate: { itemsPerPage: pageSize, currentPage: pageNumber }">
               
     <pagination-controls 
                    (pageChange)="handlePageChange($event)"
                    previousLabel="Previous"
                    nextLabel="Next"
            ></pagination-controls>

服务


 getUsers(pageNumber: number): Observable<User[]> {

        let params = new HttpParams();

        params = params.append('id', id).append('pageNumber', (pageNumber - 1).toString())
            .append('pageSize', constants.pageSize);

        this.httpService.httpGet(this.Endpoint, params)
            .subscribe(
                (response: User[]) => {
                    this.users$.next(response
                        .filter(user =>  user
                        ));

                });
        return this.users$;
    }

【问题讨论】：

标签： angular8 angular2-observables rxjs-observables ngx-pagination

【解决方案1】：

正如 RxJS 5 的作者所说，在可观察链中使用 getValue() 表明你在做某事错误。

在这种情况下，users$ 是一个observable。为了获得 observable 的新值，我们需要订阅并收听。我们在 Angular 的 HTML 端使用 async pipe 来做到这一点，如下所示：

<tr *ngFor="let user of (users$ | async) | paginate: { itemsPerPage: pageSize, currentPage: pageNumber }">

【讨论】：