Question

我需要一些方法来跟踪当前正在显示的材料表中的项目（行）。根据{{3}}，<mat-table>建立在<cdk-table>之上，为其提供viewChange属性。我的理解是，只要显示的行集发生变化，就会触发BehaviorSubject。例如，总共可能有400行，但由于分页，屏幕上只有20行。当用户单击以转到下一页时，这应该导致viewChange发出。有谁知道如何使用这个属性？我尝试了以下代码，但它只触发一次，值为{ start: 0, end: 1.7976931348623157e+308 }。

component.ts：

allTasks = new MatTableDataSource<Task>([]);

@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;
  this.table.viewChange.asObservable().subscribe(val => {
    console.log(`${val.start} - ${val.end}`);
  });
}

component.html：

<mat-table
  matSort
  [dataSource]="this.allTasks"
>
...
</mat-table>

Answer 1

显示行的一种方法是使用paginator的subscribe并使用pageIndex从dataSource获取数据。

allTasks = new MatTableDataSource<Task>([]);

@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;

  this.allTasks.paginator.page.subscribe((pageEvent: PageEvent) => {
      const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
      const endIndex = startIndex + pageEvent.pageSize;
      const itemsShowed = this.allTasks.filteredData.slice(startIndex, endIndex);
      console.log(itemsShowed);
  });

}

Answer 2

似乎对viewChange的适当支持是Angular Material代码中的TODO项。这是今天最新版本的摘录。

// TODO(andrewseguin): Remove max value as the end index
//   and instead calculate the view on init and scroll.
/**
 * Stream containing the latest information on what rows are being displayed on screen.
 * Can be used by the data source to as a heuristic of what data should be provided.
 */
viewChange: BehaviorSubject<{start: number, end: number}> =
    new BehaviorSubject<{start: number, end: number}>({start: 0, end: Number.MAX_VALUE});

并且它从未在组件中使用。

Answer 3

虽然Daniel解决方案运行良好，但我发现更简单了。

this.allTasks.connect().value

将为您提供当前页面屏幕上显示的行。

如果您希望所有过滤的行（可能显示在几页上），也可以使用：

this.allTasks.filteredData

角度材质表：检测当前显示的行（项）

3 个答案: