在我的Angular应用中,我正在使用Angular cdk中的Virtual Scroll。
这是我组件的模板:
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
在Component的类中,我有一个方法可以更改数组items
为其赋予新的内容。每次调用此方法时,数组的大小都会改变:
reload(newItems) {
this.items = newItems;
}
调用方法reload
之后,将正确更新项目数组,并且视图将反映此更改。但是,滚动条不会回到顶部。
每次更改items
数组时,我希望通过虚拟滚动将顶部的滚动重置。
答案 0 :(得分:0)
我通过在组件中注入CdkVirtualScrollViewport
解决了这个问题:
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
// ...
export class MyComponent {
@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
// ...
reload(newItems) {
this.items = newItems;
this.virtualScroll.scrollToIndex(0);
}
}
致电this.virtualScroll.scrollToIndex(0);
可以解决问题。