Question

我是VM清晰度方面的新手，我试图实现服务器端分页。过滤后，我需要在数据网格中获取项目总数。我可以使用分页对象引用显示HTML中的值。如何将分页对象绑定到组件？我正在使用'onDgRefresh'事件获取页面更改和过滤更改。

   <clr-datagrid (clrDgRefresh)="onDgRefresh($event)" class="item-datagrid"
*ngIf="showCondition" [clrDgLoading]="gridRefreshing">

这是我的clr-dg-footer。

    <clr-dg-footer>
  <clr-dg-pagination  #pagination [clrDgPageSize]="10">
    <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">per page</clr-dg-page-size>
    {{pagination.totalItems}} items
  </clr-dg-pagination>
</clr-dg-footer>

每当网格中的项目数少于一定大小时，我就必须调用API。所以我必须要获取网格中的项目数。是否有任何选项可以获取总项目数？我尝试过

   <clr-dg-pagination [clrDgTotalItems]="totalItemsInGrid" #pagination [clrDgPageSize]="10">

但是没有用。

VM清晰度版本2.0
角度版本：8

Answer 1

为了使用“pagination.totalItems”，您需要添加 [clrDgTotalItems] 属性。此属性的值将在组件属性中称为“totalItems”。

这是您的更新标记。

<clr-dg-pagination  #pagination [clrDgPageSize]="10" [clrDgTotalItems]="<your total count>">
    <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">per page</clr-dg-page-size>
        {{pagination.totalItems}} items
</clr-dg-pagination>

这将正确显示总项目数。

这是我的实现

<clr-dg-pagination #pagination [clrDgTotalItems]="users.length">
     <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
       {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
 </clr-dg-pagination>

参考：https://v2.clarity.design/datagrid/pagination

Answer 2

通过让我们的API返回结果的总数以及分页的结果数据，我能够在服务器端分页中使用它。

只需将{{pagination.totalItems}}更改为{{someOtherValue}}（即从服务器获取的值），就可以在页脚中设置项目总数。换句话说，不要依赖插件的totalItems值，因为它不会包含服务器的总数。在这里替换您自己的值。

使用Clarity Design时如何将数据网格中的所有项目绑定到组件（VM清晰度）。具有服务器分页的数据网格

2 个答案: