VM Clarity 2.0+Angular8：如何绑定数据网格总条目至组件

嘿，作为Clarity新手遇到这个问题很正常，我来帮你捋清楚怎么搞定服务端分页下的总条目数获取和组件绑定问题～

核心思路 #

服务端分页的核心是总条目数由后端API返回，前端需要把这个值同步给Clarity的分页组件，同时在组件类里也能直接访问这个值。你之前尝试的[clrDgTotalItems]方向是对的，只是可能没在组件里正确更新这个绑定的值，另外也可以通过ViewChild直接获取分页组件的引用。

具体步骤和代码示例 #

1. 模板中正确绑定总条目数

首先修正你的模板代码，确保[clrDgTotalItems]绑定到组件类里的变量，同时保留分页组件的模板引用#pagination：

<clr-datagrid (clrDgRefresh)="onDgRefresh($event)" class="item-datagrid" *ngIf="showCondition" [clrDgLoading]="gridRefreshing">
  <!-- 这里添加你的列定义，比如<clr-dg-column> -->
  
  <clr-dg-footer>
    <clr-dg-pagination #pagination 
                       [clrDgTotalItems]="totalItemsInGrid" 
                       [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>
</clr-datagrid>

2. 组件类中获取总条目数并更新绑定值

在组件类里，我们需要：

• 定义变量存储总条目数
• 通过ViewChild获取分页组件引用（可选，但方便直接访问）
• 在onDgRefresh事件中调用API，获取总条目数并更新变量

import { Component, ViewChild, OnInit } from '@angular/core';
import { ClrDatagridPagination, ClrDatagridRefreshEvent } from '@clr/angular';
// 导入你的API服务
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  totalItemsInGrid = 0;
  gridRefreshing = false;
  showCondition = true;
  // 存储当前页的数据列表
  dataList: any[] = [];

  // 获取分页组件的引用，Angular 8中需要指定static: false（因为模板有*ngIf）
  @ViewChild('pagination', { static: false }) pagination?: ClrDatagridPagination;

  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    // 初始化加载数据
    this.onDgRefresh({ current: 1, size: 10 });
  }

  async onDgRefresh(event: ClrDatagridRefreshEvent) {
    this.gridRefreshing = true;
    try {
      // 从事件中获取分页和过滤参数
      const pageParams = {
        page: event.current,
        pageSize: event.size,
        // 如果有过滤条件，从event.filters中提取，根据你的过滤实现调整
        filters: event.filters
      };

      // 调用API获取数据和总条目数
      const apiResponse = await this.dataService.fetchData(pageParams);
      
      // 更新数据列表和总条目数
      this.dataList = apiResponse.data;
      this.totalItemsInGrid = apiResponse.total; // 这里的total是API返回的总条目数

      // 如果你需要直接从分页组件获取总条目数，也可以这样用
      if (this.pagination) {
        console.log('当前总条目数:', this.pagination.totalItems);
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      this.gridRefreshing = false;
      // 告诉Clarity网格刷新完成
      event.preventDefault();
    }
  }
}

关键注意点 #

• API返回要求：后端API必须返回两个关键数据：当前页的数据列表，以及所有符合条件的总条目数（过滤后的总数）。这是服务端分页的基础。
• clrDgTotalItems的作用：这个输入属性是给分页组件传递总条目数的唯一正确方式，分页组件会根据这个值计算页码数量、显示总条目数文本。你之前没生效大概率是因为totalItemsInGrid没有被正确赋值为API返回的总数。
• ViewChild的用途：如果在组件的其他逻辑中需要实时获取总条目数，比如你说的“当网格条目数低于特定值时调用API”，直接用this.totalItemsInGrid判断就可以，不需要通过分页组件；但如果需要直接操作分页组件（比如跳转到某一页），ViewChild的引用就很有用。

内容的提问来源于stack exchange，提问作者Vishnu KR