trNgGrid自定义分页：设置每页显示条数的技术问询

放心，我来帮你搞定这个自定义分页需求，trNgGrid已经提供了现成的属性来实现这个功能，咱们一步步拆解：

1. 组件内准备分页控制变量 #

首先在你的Angular组件类里，定义一个用来存储用户选择的每页条数的变量，给个合理的默认值（比如10）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html'
})
export class YourTableComponent {
  // 初始化默认每页显示10条
  selectedPageSize = 10;
  // 你的表格数据源
  tableData = [...]; // 这里替换成你实际的业务数据
}

2. 绑定分页属性到trNgGrid表格 #

在HTML的trNgGrid标签上，通过[filtered-items-page]属性把咱们定义的变量绑定进去——这个属性就是trNgGrid用来控制每页显示条数的核心配置：

<tr-ng-grid 
  [items]="tableData"
  [filtered-items-page]="selectedPageSize"
  <!-- 其他表格配置（比如列定义、排序等）保持不变 -->
></tr-ng-grid>

3. 添加用户选择控件（实现双向联动） #

接下来给用户加一个选择每页条数的入口，比如下拉框或数字输入框，通过双向绑定和selectedPageSize关联，用户选择后表格会自动更新分页：

示例1：下拉框选择固定选项 #

<div class="page-size-controls">
  <label>每页显示：</label>
  <select [(ngModel)]="selectedPageSize">
    <option value="5">5条</option>
    <option value="10" selected>10条</option>
    <option value="20">20条</option>
    <option value="50">50条</option>
  </select>
</div>

示例2：数字输入框支持自定义数值 #

如果想让用户自由输入条数（加个范围限制更友好）：

<div class="page-size-controls">
  <label>每页显示：</label>
  <input type="number" [(ngModel)]="selectedPageSize" min="1" max="100" /> 条
</div>

4. 额外提示（可选） #

• 如果你希望所有trNgGrid表格都用同一个默认分页条数，可以在模块里配置全局默认值：

import { NgModule } from '@angular/core';
import { TrNgGridModule, TrNgGridConfig } from 'tr-ng-grid';

@NgModule({
  imports: [TrNgGridModule],
  providers: [
    {
      provide: TrNgGridConfig,
      useValue: {
        defaultPageSize: 10 // 设置全局默认每页条数
      }
    }
  ]
})
export class YourModule { }

不过这个全局配置只是默认值，还是需要结合组件内的变量才能实现用户自定义选择的功能。

• 当用户修改分页条数时，trNgGrid会自动重新计算分页逻辑，不需要你手动调用额外方法，框架已经帮你处理了联动。

这样设置后，用户就能自由选择每页显示的数据条数，表格会实时响应变化啦！

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