为清晰度数据网格行实现Angular CDK虚拟滚动

我想实现具有虚拟滚动功能的datarid。我们可以使用Angular cdk包为Clarity datagrid行实现虚拟滚动吗?

我尝试在datagrid上添加cdk虚拟滚动,如下所示:

<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数据网格将按预期工作。我们有什么办法吗?

谢谢。

chinasl521 回答:为清晰度数据网格行实现Angular CDK虚拟滚动

您可以简单地使用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>
本文链接:https://www.f2er.com/3162694.html

大家都在问