angular - 角料表自动滚动

Question

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

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

Answer 1

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

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

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

例子

Answer 2

要详细说明接受的答案，您需要在加载数据后滚动表格。就我而言，我为用户提供了各种数据过滤器选项，并且当其中任何一个发生更改时也需要滚动到底部。这可以使用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);
    }
}