在 mattable 中滚动到顶部

Question

我想在 matTable 中为 "move scroll to top" 创建一个按钮，但我没有得到它。

<mat-table  #table [dataSource]="dataSource 
   (scroll)="onTableScroll($event)">

      <!--table data -->
</mat-table>

<button (click)="scrollToTop()>Test</button>

//typescript
@ViewChild('table') table: ElementRef;

scrollToTop() {
       this.table.nativeElement.scrollIntoView(true);
}

但是不行，nativeElement不是MatTable的元素，怎么办？

Answer 1

您已接近解决方案，您只缺少一件小事。你需要告诉 ViewChild 你想从选择器中读取哪个标记。在您的情况下，这将是 ElementRef，通过以 { read: ElementRef }.

的形式传递第二个参数

@ViewChild('table', {read: ElementRef}) table: ElementRef;

Here is a stackblitz showing it in action.

在 mattable 中滚动到顶部

scroll in mattable to top

angular

mat-table