PrimeNG p-table的paginatorLeft/paginatorRight不显示问题求助

我看了你的问题和对应的代码，问题出在对PrimeNG p-table分页自定义区域的使用方式理解错啦～

错误原因 #

你直接使用了<paginatorLeft>或<paginatorRight>标签，但PrimeNG的p-table分页栏的自定义内容，并不是通过这两个标签来定义的，而是需要通过**ng-template结合pTemplate指令**来指定，这是PrimeNG组件模板自定义的标准方式。

正确实现步骤 #

要让分页栏的左右自定义区域显示出来，你需要按照以下方式修改模板：

1. 在<p-table>组件内部，添加ng-template标签，并通过pTemplate指令指定模板类型为paginatorLeft（左侧区域）或paginatorRight（右侧区域）
2. 在这些ng-template内部编写你想要显示的自定义内容
3. 确保<p-table>的[paginator]="true"属性已经正确设置（你已经做到了这一点，分页控件本身能正常显示）

修正后的示例代码 #

<p-table 
  [value]="providers" 
  [paginator]="true" 
  [rows]="10"
  [showCurrentPageReport]="true"
  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
>
  <!-- 表格头部模板 -->
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Specialty</th>
      <th>Location</th>
      <th>Phone</th>
    </tr>
  </ng-template>

  <!-- 表格内容模板 -->
  <ng-template pTemplate="body" let-provider>
    <tr>
      <td>{{provider.name}}</td>
      <td>{{provider.specialty}}</td>
      <td>{{provider.location}}</td>
      <td>{{provider.phone}}</td>
    </tr>
  </ng-template>

  <!-- 分页左侧自定义内容 -->
  <ng-template pTemplate="paginatorLeft">
    <button pButton type="button" label="导出数据" class="p-button-secondary"></button>
  </ng-template>

  <!-- 分页右侧自定义内容 -->
  <ng-template pTemplate="paginatorRight">
    <span class="p-mr-2">每页行数:</span>
    <p-dropdown 
      [options]="rowOptions" 
      [(ngModel)]="rows" 
      [style]="{'width': '100px'}"
    ></p-dropdown>
  </ng-template>
</p-table>

额外注意事项 #

• 确认你的PrimeNG版本支持paginatorLeft和paginatorRight模板（PrimeNG 12及以上版本都支持这个特性）
• 自定义模板必须作为<p-table>的直接子元素存在，不能放在组件外部或者其他嵌套容器里
• 如果需要动态绑定数据到自定义区域，直接在ng-template内部使用组件的属性即可，和普通模板用法一致

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