如何为表 tbody 使用 cdk-virtual-scroll-viewport答案

【问题标题】：How to use cdk-virtual-scroll-viewport for table tbody如何为表 tbody 使用 cdk-virtual-scroll-viewport
【发布时间】：2018-11-04 13:01:56
【问题描述】：

由于 html 解析 tr 然后 td，使用<cdk-virtual-scroll-viewport>breaks 视图是否有任何 cdkVirtualScrollViewport 作为<tbody> 的指令？

<tbody>
<cdk-virtual-scroll-viewport  style="height: 500px; width: 100%;"  itemSize="100"
    <tr [hidden]="data.get_user.name.toLowerCase().indexOf(pupilFilter.name.toLowerCase()) < 0 || (pupilFilter.classValue != '0' && data.get_class.value != pupilFilter.classValue)" appMarkClicked="" *cdkVirtualFor="let data of top.data.branch.get_users_as_pupil; let i = index" >
        <td>{{i + 1}}</td>
    </tr>
</cdk-virtual-scroll-viewport>
</tbody>

【问题讨论】：

material.angular.io/cdk/scrolling/…
我通过设置高度和宽度来完成这项工作。这可能很棘手，不要将其设置为 100%，因为这是 26 像素，请将其设置为 1600 像素。
您找到解决方案了吗？我也有同样的要求。

标签： angular angular7 angular-cdk virtualscroll

【解决方案1】：

好吧，我可以把<cdk-virtual-scroll-viewport放在<table>之前

<cdk-virtual-scroll-viewport>
    <table>
    </table>
</cdk-virtual-scroll-viewport>

【讨论】：

是的，这行得通，遗憾的是它也滚动了表格标题
@ArronMcCrory 是的，然后我删除了标题，否则如何......这个应该作为指令来
我认为 mat-table 最终会内置虚拟滚动条。
在这种情况下我们怎样才能使标题固定？
找到了一个固定标题的解决方案，我们可以使用 _renderedContentOffset 获得偏移量，它给出了在打字稿中 cdkscroll 的视口中最顶部的项目的偏移量，并将 th 的 style.top 设置为偏移量的负数价值获得，这是我提到的例子stackblitz.com/edit/…