angular - 使用 rxjs 进行垫排序无法正常工作

Question

当从观察者流创建源时，我在 mat-table 中实现 mat-sort 时遇到问题。

通过文档简单地实现它:

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
}

工作不正常 - 在我的表格中总是只排序 5 行。

我想，我的问题是如何正确使用它与 rxjs 连接。

不幸的是，在检查了其他问题/文档后我找不到任何想法。

我从两个观察者流生成数据源。我还为它使用了 BehaviourSubject(用于初始值)、combineLatest 和切换映射。表格已正确创建并完美运行。

此外，当我添加过滤器时(根据 Angular Material 设计文档)工作正常。但是垫排序...不是(只有前 5 行)。

    ngOnInit() {
            this.filters = itemFilters;
            this.idSubject = new BehaviorSubject(this.filters[0]);
            Observable.combineLatest(this.name, this.selectedFilter)
                .do(_ => this.items = null)
                .switchMap(([name, filterIndex]: [Name | null, number]) => {
                    const item = this.filters[filterIndex];
                    this.namesSubject.next(item.display);
                    return this.itemService.getItems(name);
                })
                .subscribe(this.setItems.bind(this), this.setError.bind(this));
        }

我也尝试过使用 Observable.zip - 但我认为这也不是我的情况。任何想法/建议都将非常有值(value)。

我想，我应该订阅可观察流的排序方法。我对分页有同样的问题。有时有效，有时无效。

Answer 1

您的问题代码类似于显示来自 HTTP 调用的数据的垫表示例:https://stackblitz.com/angular/rmoxkmpkkyj?file=app%2Ftable-http-example.ts

我认为可以通过分别处理分页和排序事件来简化实现。

请看一下我构建的这个刷新每个事件数据的示例:https://stackblitz.com/edit/angular-material-mat-table-sort-merge-streams?file=src%2Fapp%2Fmy-books%2Fmy-books.component.ts

事件处理器

ngOnInit() {

    // default data 
    this.refresh(this.getDefaultOptions());

    this.sort.sortChange.subscribe((sort: Sort) => {
      console.log('sortChange', this.sort.active);
      this.paginator.pageIndex = 0;
      this.refresh(this.getCurrentOptions());
    });

    this.paginator.page.subscribe((page: PageEvent) => {
      console.log('paginator ', page);
      this.refresh(this.getCurrentOptions());
    });

}

获取当前 View 选项的方法

getCurrentOptions() {
    const options: ViewOptions = {
      sortField: this.sort.active,
      sortDirection: this.sort.direction,
      page: this.paginator.pageIndex,
      pageSize: this.paginator.pageSize
    };

    return options;
  }

如何合并多个流的示例

  findBooks(options: ViewOptions): Observable<BooksResponse> {

    console.log('findBooks', options);

    // retrieve multiple streams
    const multipleStreams = this.mockMultipleStreams();

    // sort and slice result
    const sortedAndSliced = multipleStreams.pipe(
      tap(items => {
        items = items.sort((a, b) => {
          const sortOrder = options.sortDirection === 'asc' ? -1 : 1;
          const valueA = a[options.sortField];
          const valueB = b[options.sortField];

          var result = (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
          return result * sortOrder;
        });
      }),
      tap((items: Book[]) => {
        const start = options.page * options.pageSize;
        const end = start + options.pageSize;
        items = items.slice(start, end);
      })
    );

    // wrap in the response object
    const bookResponse = sortedAndSliced.pipe(
      map((items: Book[]) => {
        const response: BooksResponse = {
          items: items,
          total: this.fakeDataLength
        };
        return response;
      })
    );

    return bookResponse;

  }

  mockMultipleStreams(): Observable<Book[]> {
    const third = this.fakeDataLength / 3;

    // merge all the streams together
    const allTheBooks: Observable<[Book[], Book[], Book[]]> = zip(
      of(this.mockBooks('Magazine', third)),
      of(this.mockBooks('Books', third)),
      of(this.mockBooks('Newspaper', third))
    );

    // flatten the data 
    const result = allTheBooks
      .pipe(map((items) => {
        let result: Book[] = [];
        items.forEach(books => {
          books.forEach(book => { result.push(book) })
        });
        return result;
      }));

      return result;
  }

请在此处查看完整代码:https://stackblitz.com/edit/angular-material-mat-table-sort-merge-streams?file=src%2Fapp%2Fbooks.service.ts