用灰色 header 实现 <p-table>

Question

我对 angular 比较陌生。我正在尝试用灰色的 table header 实现 p-table。

我相信这是用 ng-template 完成的 - 但我必须遗漏一些东西。

这是我的

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

</p-table>

它看起来还不错 - 但它没有像其他 table header 那样的浅灰色背景。

此外，我知道我遗漏了一些东西，因为如果我尝试在下面的另一个 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 元素中分配 table 值。

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

并且您可以通过正文模板中的 let-product 变量在正文模板中使用产品日期

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

参考：Stackblitz

文档：PrimeNG Documentation

用灰色 header 实现 <p-table>

Implementing a <p-table> with a grey header

primeng

angular