Question

尝试将combineLatest与Angular Material Table一起使用。尝试将MatPaginator和MatSort组合在一起，但无法正常工作。

这是我关注的example。我正在看“通过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只能在加载组件时触发一次。我希望每次触发排序或分页时都会触发它。当我直接订阅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”与角材料表一起使用

1 个答案: