Question

我想滚动加载数据。滚动应用了ng卡。

<nb-card>

<nb-card-body class="patientInfoStyle">			    
				   
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>							
				 	
</nb-card-body>

</nb-card>

谢谢。

Answer 1

您可以使用ngx-infinite scroll轻松地做到这一点。

还有一个有趣的解决方案，用于图像延迟加载。跟随this

Answer 2

这并非您要找的答案，但是您可以执行以下操作：

打开github帐户
转到ng2-smart-table git并将其派生到您的存储库
使用git clone使用提供的链接签出库
使用您选择的任何库添加无限滚动（ngx-无限滚动，角形材料等）
您可以按照this guide进行操作，以将库打包到github并在项目中的json包中使用它。

在我的情况下，我使用了Angular Material cdk。为了将它与库中的表一起使用，请执行以下操作：

用cdk包装外部表元素

正文

用* cdkVirtualFor

ngFor

作者编写的代码具有良好的做法，易于阅读。自己做不是很困难。同样，通过上述操作，您可以对任何开源库重复此方法

Answer 3

我按照@olNoy 的建议创建了 ng2-smart-table 的 alpha 版本，并使用 angular-cdk 滚动来滚动主体。

您可以在 https://github.com/andreatoppan/ng2-smart-table 上找到它，这很粗鲁，但如果有人感兴趣，我想分享一下，因为它在我的情况下有效。

我将头部和身体视为 2 个不同的表，在 tbody 之外放置了一个 cdk-virtual-scroll-viewport。这样头部将保持原位，身体可以滚动。这种方法的缺点是 head 和 body 列会不同，这就是为什么我在第二个表中放置了另一个 head 并创建了一些未优化的函数来调整组件中的列大小。如果您觉得它有用，您可以根据需要进行扩展或修复。

ng2-smart-table滚动加载数据

3 个答案: