0

我想将 CdkVirtualScrollViewport 与 *ngIf 构造的内部部分一起使用 - 这是我的模板：

<div *ngIf="noScroll; else virtscroll" class="example-viewport">
  <span>Something others</span>
</div>
<ng-template #virtscroll>
  <cdk-virtual-scroll-viewport class="example-viewport">
    <table class="table" mat-table [dataSource]="virtScrollDataSource">
...
    </table>
  </cdk-virtual-scroll-viewport>
</ng-template>

最初是 noscroll=false，所以虚拟滚动视图将被渲染并且滚动工作完美，我可以滚动我在表数据源中设置的所有 200 行。我的问题是：在从 virtual-scroll-view 切换到 noscroll-view 并再次切换回 virtual-scroll-view 之后（例如将 noscroll 条件从 false 更改为 true 并返回到 false），cdk-virtual-scroll-viewport 呈现只有“可见”行，并且不提供对表的所有 200 行的完全滚动可能性。我认为，这种行为的原因是，在切换到 noscroll-view 时，CdkVirtualScrollViewport 关闭了他对视口更改的内部订阅：他的内部成员 _viewportChanges.closed=true 并且在切换回虚拟滚动视图后，这个状态仍然存在关闭。

要切换到虚拟滚动视图：我将滚动偏移量重置为 0，设置视图的完整内容大小并设置可见行：

    this.viewport.scrollToOffset(0);
    this.viewport.setTotalContentSize(this.itemSize * data.length);
    this.visibleData.next(data.slice(0, PAGESIZE));

我还应该做什么？

这是我的示例代码的 Stackblitz 链接（请耐心等待，此代码仅用于演示我的问题）：

https://stackblitz.com/edit/cdk-virtual-scroll-viewport-in-ngif?devtoolsheight=33&embed=1&file=src/app/app.component.html

任何帮助将不胜感激 ！

4

0 回答 0