0

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

1 回答 1

1

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

在这种情况下， users$ 是一个observable。为了获得 observable 的新值，我们需要订阅和监听。我们在 Angular 的 HTML 端使用异步管道执行此操作，如下所示：

<tr *ngFor="let user of (users$ | async) | paginate: { itemsPerPage: pageSize, currentPage: pageNumber }">
于 2020-10-29T07:51:08.067 回答