ng2-smart-table滚动加载数据

时间:2019-03-18 09:06:02

标签: javascript angular angular7

我想滚动加载数据。滚动应用了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>

谢谢。

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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

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

  • 用cdk包装外部表元素
  • 正文组件中的
  • 用* cdkVirtualFor
  • 替换'tr'元素上的* ngFor

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

答案 2 :(得分:0)

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

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

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