将 `combineLatest` 与 Angular Material Table 结合使用

Question

正在尝试将 combineLatest 与 Angular Material Table 一起使用。尝试组合 MatPaginator 和 MatSort 但它不起作用。

这是我正在关注的example。我正在查看 "Table retrieving data through HTTP" 示例。

这是我正在尝试做的事情：

@ViewChild(MatPaginator) private _paginator: MatPaginator;
@ViewChild(MatSort) private _sort: MatSort;

public ngOnInit(): void {

    this._sort.sortChange.subscribe(
        () => {
            console.log("this works");
        }
    );

    combineLatest(
        this._sort.sortChange,
        this._paginator.page
    ).pipe(
        startWith({}),
        switchMap(
            () => {
                return this._userService.getAll();
            }
        ),
        tap(
            (users: IUser[]) => {
                this._data = users;
            }
        )
    ).subscribe();
}

上面代码的问题是 combineLatest observable 只在加载组件时触发一次。我希望它在每次触发排序或分页时触发。当我直接订阅 sortChange 时，它会在我每次更改排序时触发。

当我将 combineLatest 更改为 merge 时，上面的代码将起作用。它将按预期工作。但是每次更改时，我都需要结合分拣机和分页器的最新结果。但它永远不会触发 combineLatest。这是怎么回事？

Answer 1

您正在将 combineLatest 的结果传递给 startWith 运算符，该运算符只会发出一次。只需省略 startWith 运算符，而不是将结果设置在 tap 运算符中，而是使用 subscribe 函数，如下所示：

@ViewChild(MatPaginator) private _paginator: MatPaginator;
@ViewChild(MatSort) private _sort: MatSort;

public ngOnInit(): void {

    this._sort.sortChange.subscribe(
        () => {
            console.log("this works");
        }
    );

    merge(combineLatest(
        this._sort.sortChange,
        this._paginator.page), of({}))
    .pipe(switchMap(() => this._userService.getAll()))
    .subscribe((users: IUser[]) => this._data = users);
}

将 `combineLatest` 与 Angular Material Table 结合使用

Using `combineLatest` with Angular Material Table

rxjs

angular-material

angular-material2

angular