有没有办法在后面的代码中滚动 Angular Material Table?
我有一个要求,当页面加载时,表格应该始终位于底部。不幸的是,分页不是一种选择。
有没有办法在后面的代码中滚动 Angular Material Table?
我有一个要求,当页面加载时,表格应该始终位于底部。不幸的是,分页不是一种选择。
通常,具有滚动功能的角材料中的可滚动元素使用cdkScrollable 指令,但情况似乎并非如此mat-table
所以现在你可以通过直接访问元素来绕过它,并滚动到高 y 值
scrollBottom() {
document.querySelector('mat-table').scrollBy(0, 10000);
}
要详细说明接受的答案,您需要在加载数据后滚动表格。就我而言,我为用户提供了各种数据过滤器选项,并且当其中任何一个发生更改时也需要滚动到底部。这可以使用ContentObserver
CDK 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);
}
}