Question

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

我要求在页面加载时表格始终位于底部位置。不幸的是，分页不是一种选择。

Answer 1

通常情况下，具有滚动功能的角度材质中的可滚动元素使用cdkScrollable directive，但mat-table

的情况似乎并非如此

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

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

Example

Answer 2

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

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

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

角度材料表自动滚动

2 个答案: