使用灰色标题实现<p-table>

Question

我对angular来说还是个新手。我正在尝试实现一个带有灰色表头的p-table。

我相信这是使用ng-template完成的--但我肯定遗漏了一些东西。

这是我的

<p-table>
  <ng-template pTemplate="header" let-rowData>
    <tr>
      <th colspan="1">Col 1</th>
    </tr>
  </ng-template>

</p-table>

它看起来还可以--但是它没有像其他表格标题那样有浅灰色的背景。

此外，我知道我遗漏了一些东西，因为如果我尝试在另一个ng-template中实现一个body，就像下面这样-- body根本不会呈现。

<p-table>
  <ng-template pTemplate="header" let-rowData>
    <tr>
      <th colspan="1">Col 2</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body">
    <tr>
      <td>Cell 1</td>
    </tr>
  </ng-template>
</p-table>

非常感谢。

Answer 1

您需要在p-table元素中分配表值。

<p-table [value]="products">
...
</p-table>

您还可以通过body模板中的let-product变量在body模板中使用产品日期

<ng-template pTemplate="body" let-product>
...
</ng-template>

参考资料：Stackblitz

文档：PrimeNG Documentation