2

有没有办法在后面的代码中滚动 Angular Material Table?

我有一个要求,当页面加载时,表格应该始终位于底部。不幸的是,分页不是一种选择。

4

2 回答 2

3

通常,具有滚动功能的角材料中的可滚动元素使用cdkScrollable 指令,但情况似乎并非如此mat-table

所以现在你可以通过直接访问元素来绕过它,并滚动到高 y 值

  scrollBottom() {
    document.querySelector('mat-table').scrollBy(0, 10000);
  }

例子

于 2018-01-30T20:04:52.993 回答
0

要详细说明接受的答案,您需要在加载数据后滚动表格。就我而言,我为用户提供了各种数据过滤器选项,并且当其中任何一个发生更改时也需要滚动到底部。这可以使用ContentObserverCDK Observers 模块中的一个来实现。

您需要将表格包装在一个元素中:

<div id="tableWrapper">
    <mat-table>
        ...
    </mat-table>
</div>

然后,在组件类中:

...
import {ContentObserver} from '@angular/cdk/observers';
...

export class MyComponent {

    constructor(private readonly contentObserver: ContentObserver) {}

    ngAfterViewInit(): void {
      this.contentObserver.observe(document.querySelector('#tableWrapper'))
        .subscribe(this.tableContentChanged);
      // Load the table data here
    }

    tableContentChanged() {
      const table = document.querySelector('mat-table');
      table.scrollBy(0, table.scrollHeight);
    }
}
于 2021-01-06T11:34:59.910 回答