Angular 使用rxjs的Mat排序无法正常工作

我在mat表中实现mat排序时遇到了问题，因为源是从观察者流创建的

只需通过以下方式通过文档实现：

ngAfterViewInit（）{
this.dataSource.sort=this.sort；
}

工作不正常-始终将在我的表上仅排序5行

我认为，我的问题在于如何正确地将其与rxjs连接一起使用

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

我从两个观察者流生成数据源。我还用于it行为主题（用于初始值）、组合测试和切换映射。表创建正确，工作正常

此外，当我添加过滤器（根据角材料设计文档）是正常工作。但我认为。。。不是（仅前5行）

ngOnInit（）{
this.filters=itemFilters；
this.idSubject=新行为主体（this.filters[0]）；
Observable.CombineTest（this.name，this.selectedFilter）
.do（=>this.items=null）
.switchMap（（[name，filterIndex]：[name | null，number]）=>{
const item=this.filters[filterIndex]；
this.namesSubject.next（item.display）；
返回此.itemService.getItems（名称）；
})
.subscribe（this.setItems.bind（this）、this.setError.bind（this））；
}

我还尝试了Observable.zip，但我认为这也不是我的情况。任何想法/建议都是非常有价值的

---

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

您的问题代码类似于mat表中显示HTTP调用数据的示例：

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

请看我构建的这个示例，它刷新每个事件的数据：

事件处理程序

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());
    });

}

获取当前视图选项的方法

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;
  }

findBooks（选项：ViewOptions）：可观察{
log（'findBooks'，选项）；
//检索多个流
const multipleStreams=this.mockMultipleStreams（）；
//排序和切片结果
const sortedAndSliced=多个团队管道(
点击（项目=>{
项目=项目。排序（（a，b）=>{
const sortOrder=options.sortDirection=='asc'？-1:1；
常量值a=a[options.sortField]；
const valueB=b[options.sortField]；
var结果=（valueAvalueB）？1:0；
返回结果*排序器；
});
}),
轻触（（项目：Book[]）=>{
const start=options.page*options.pageSize；
const end=start+options.pageSize；
items=items.slice（开始、结束）；
})
);
//包装在响应对象中
const bookResponse=sortedAndSliced.pipe(
地图（（项目：Book[]）=>{
常量响应：BooksResponse={
项目:项目,，
总计：此.fakeDataLength
};
返回响应；
})
);
返回bookResponse；
}
mockMultipleStreams（）：可观察{
const third=this.fakeDataLength/3；
//将所有的流合并在一起
const all thebook:Observable=zip(
（这本模拟书（‘杂志’，第三本）），
（这是模拟本（‘书’，第三种）），
（这是模拟本（“报纸”，第三））
);
//将数据展平
const result=所有书籍
.管道（地图（（项目）=>{
让结果：书本[]=[]；
items.forEach（书籍=>{
books.forEach（book=>{result.push（book）}）
});
返回结果；
}));
返回结果；
}

---

请参阅此处的完整代码：

我也有同样的问题。连接两个或多个观察对象，并使用mat table->MatSort功能。您能否提供一些排序可复制代码，例如在StackBlitz中，这是项目大部分的一部分。我将尝试模拟类似的行为，我只需要创建一个新项目。但是我会努力的。我真的很想回答这个问题来帮助你，但是问题还不清楚。你能创建一个演示来说明这个问题吗？对于我来说，编写一个在开放api上工作的应用程序的一小部分并不容易。但我仍然在努力。一般来说，问题是连接多个观察者拖缆，并通过mat排序方法对其进行排序。感谢您的回复。我认为这个解决方案对我不起作用。我的意思是，如果我有多个流。你应该在服务级别上组合多个流。我将添加一个示例。更新了多个流的响应，看看仍然不起作用。我认为，

combinelateest

存在问题。仍然只对表中的几行进行了排序。