PrimeNG表格无数据时如何完全隐藏caption和header？

方案1：完全隐藏整个表格 #

不用单独给caption和header加*ngIf，直接给整个<p-table>添加条件判断，当数据为空时直接不渲染表格：

<p-table *ngIf="data && data.length > 0" [value]="data">
  <ng-template pTemplate="caption">
    表格标题内容
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>列名1</th>
      <th>列名2</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{item.field1}}</td>
      <td>{{item.field2}}</td>
    </tr>
  </ng-template>
</p-table>

这样当data为空数组、null或undefined时，整个表格（包括标题、表头、空行）都会被完全隐藏。

方案2：保留空数据提示，仅隐藏表头和标题 #

如果需要在无数据时显示提示文本，而非完全隐藏表格，可给caption和header模板单独加条件判断，搭配空状态模板：

<p-table [value]="data">
  <ng-template pTemplate="caption" *ngIf="data && data.length > 0">
    表格标题内容
  </ng-template>
  <ng-template pTemplate="header" *ngIf="data && data.length > 0">
    <tr>
      <th>列名1</th>
      <th>列名2</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{item.field1}}</td>
      <td>{{item.field2}}</td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td colspan="2">暂无数据</td>
    </tr>
  </ng-template>
</p-table>

这种方式下，无数据时标题和表头会被隐藏，仅显示自定义的空数据提示行，不会出现多余的表头框架。

关键注意点 #

• 必须同时判断data是否为null/undefined以及数组长度，避免空指针报错；
• 不要单独给表头<tr>加*ngIf，PrimeNG表格的结构依赖表头模板，单独隐藏可能导致渲染出无效的表格空行。

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