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

dav*_*ino 5 angular virtualscroll angular-cdk angular7

由于HTML解析tr然后td,使用<cdk-virtual-scroll-viewport>中断视图是否有任何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>
Run Code Online (Sandbox Code Playgroud)

dav*_*ino 5

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

<cdk-virtual-scroll-viewport>
    <table>
    </table>
</cdk-virtual-scroll-viewport>
Run Code Online (Sandbox Code Playgroud)

  • 是的,这有效,遗憾的是它也会滚动表格标题 (5认同)
  • 找到了固定标题的解决方案,我们可以使用 _renderedContentOffset 获取偏移量,它给出了打字稿中 cdkscroll 的视图端口中最顶部项目的偏移量,并将 th 的 style.top 设置为接收的偏移值的负数,这是我的示例参考https://stackblitz.com/edit/components-issue-t3xvyz?file=app%2Fapp.component.ts (2认同)