Angular Material Table 自动滚动

Question

有什么方法可以滚动后面代码中的Angular Material Table吗？

我有一个要求，即在页面加载时 table 应始终位于底部位置。不幸的是，分页不是一种选择。

Answer 1

通常，angular material 中具有滚动功能的可滚动元素使用 cdkScrollable directive，但 mat-table

似乎并非如此

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

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

Example

Answer 2

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

您需要将 table 包裹在一个元素中：

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

然后，在组件class中：

...
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);
    }
}

Angular Material Table 自动滚动

Angular Material Table automatic scroll

angular-material

angular

angular-material-5