当您离开然后返回时，Angular Material 分页器和表格排序不起作用

问题描述

我的应用程序的主页有两个带有分页和排序的表格。表的数据是通过 HTTP 请求检索的，当页面最初加载时它工作得很好。最初，我每次用户导航回主页时都会发出 HTTP 请求，但我试图实现一些逻辑，以便在初始加载时只检索一次数据，以尽量避免每次发出相同的 HTTP 请求用户返回主页的时间。出于某种原因，每次用户导航到主页时发出 HTTP 请求将导致分页器和排序正常工作。但是当我实现从服务而不是通过 HTTP 请求检索数据的逻辑时，分页器和排序器停止工作。我似乎不明白为什么会发生这种情况。

分页器和排序器定义为：

@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>()

原始代码（工作正常）：

this.dataService.getTable1Data()
    .subscribe(data => this.table1Data = data,error => {
            <error handler>
  },() => {
            this.table1DataSource = new MatTableDataSource(this.table1Data);
            this.table1DataSource.paginator = this.paginator.toArray()[0];
            this.table1DataSource.sort = this.sort.toArray()[0];
        }
    );


this.dataService.getTable2Data()
    .subscribe(data => this.table2Data = data,() => {
            this.table2DataSource = new MatTableDataSource(this.table2Data);
            this.table2DataSource.paginator = this.paginator.toArray()[1];
            this.table2DataSource.sort = this.sort.toArray()[1];
        }
    );

更新代码以在初始加载时将来自 HTTP 请求的数据存储到服务中，然后每次使用服务中的数据加载表：

if (!this.tableDataService.table1Data) {
    this.dataService.getTable1Data()
        .subscribe(data => this.table1Data = data,error => {
                <error handler>
      },() => {
                this.tableDataService.table1Data = this.table1Data;
                this.table1DataSource = new MatTableDataSource(this.table1Data);
                this.table1DataSource.paginator = this.paginator.toArray()[0];
                this.table1DataSource.sort = this.sort.toArray()[0];
            }
        );
}
else {
    this.table1Data = this.tableDataService.table1Data;
    this.table1DataSource = new MatTableDataSource(this.table1Data);
    this.table1DataSource.paginator = this.paginator.toArray()[0];
    this.table1DataSource.sort = this.sort.toArray()[0];
}


if (!this.tableDataService.table2Data) {
    this.dataService.getTable2Data()
        .subscribe(data => this.table2Data = data,() => {
                this.tableDataService.table2Data = this.table2Data;
                this.table2DataSource = new MatTableDataSource(this.table2Data);
                this.table2DataSource.paginator = this.paginator.toArray()[1];
                this.table2DataSource.sort = this.sort.toArray()[1];
            }
        );
}
else {
    this.table2Data = this.tableDataService.table2Data;
    this.table2DataSource = new MatTableDataSource(this.table2Data);
    this.table2DataSource.paginator = this.paginator.toArray()[1];
    this.table2DataSource.sort = this.sort.toArray()[1];
}

当第二组代码运行时，它在初始加载时工作正常。但是当您离开页面，然后导航回来时，表格填充了预期的数据，但没有分页，排序不起作用。

我不明白为什么第一组代码有效，而第二组无效。这两种方法都以相同的方式设置 MatTableDataSource 以及排序器和分页器。为什么数据来自服务或通过 HTTP 请求很重要？我想这可能与 QueryList 有关系，但我发现我需要使用它，因为我在一页上有两个单独的表。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）