ngx-pagination angular 8可观察下一页未在FE上填充

问题描述

我对本实现中使用的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$;
    }

解决方法

正如RxJS 5的作者所说，在可观察的链中使用 getValue（）表示您做某件事错误。

在这种情况下，users $是可观察的。为了获得可观察值的新鲜值，我们需要订阅并进行收听。我们使用Angular HTML端中的 async管道来做到这一点，如下所示：

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