为 Clarity 数据网格行实现 Angular CDK 虚拟滚动答案

【问题标题】：Implement Angular CDK Virtual Scroll for Clarity datagrid rows为 Clarity 数据网格行实现 Angular CDK 虚拟滚动
【发布时间】：2019-11-05 02:19:53
【问题描述】：

我想实现具有虚拟滚动功能的 datarid。我们可以使用 Angular CDK 包来实现 Clarity 数据网格行的虚拟滚动吗？

我尝试在数据网格上添加 CDK Virtual Scroll，如下所示：

<clr-datagrid>

  <clr-dg-column>...</clr-dg-column>

  <cdk-virtual-scroll-viewport [itemSize]="--" style="height:---px">

     <clr-dg-row *cdkVirtualFor="let item of items"> ... </clr-dg-row>

  </cdk-virtual-scroll-viewport>

</clr-datagrid>

但是，数据网格上没有呈现任何内容（数据网格显示空占位符）。如果我删除 CDK 虚拟滚动，则 Clarity 数据网格按预期工作。我们有什么办法吗？

谢谢。

【问题讨论】：

Clarity 建议不要使用虚拟滚动 (github.com/vmware/clarity/wiki/Virtual-scrolling)，并且无法支持任何其他可能将功能侵入 Clarity 的库。我们建议将分页作为在数据网格中拥有大型集合的完全可访问的方式。

标签： angular angular-cdk vmware-clarity clarity angular-cdk-virtual-scroll

【解决方案1】：

您可以简单地使用 HTML 表格代替 Datagrid，它会正常工作。

<table>
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                NAME
            </th>
        </tr>
    </thead>
    <tbody>
        <cdk-virtual-scroll-viewport itemSize="50">
            <tr *cdkVirtualFor="let item of results">
                <td>{{ item.ID }}</td>
                <td>{{ item.NAME }}</td>
           </tr>
        </cdk-virtual-scroll-viewport>
    </tbody>
</table>

【讨论】：