如何使用 headercheckboxicon 和 checkboxicon 模板 primeng 复选框选择

Question

如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板

我只是按照 primeng 表文档并使用下面的代码

    <div class="card">
      <p-table
        [value]="products"
        [(selection)]="selectedProducts"
        dataKey="code"
        [tableStyle]="{'min-width': '50rem'}"
      >
        <ng-template pTemplate="checkboxicon">
          <p-checkbox label="Cheese"></p-checkbox>
        </ng-template>
        <ng-template pTemplate="headercheckboxicon">
          <p-checkbox label="Header"></p-checkbox>
        </ng-template>
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 4rem">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product>
          <tr>
            <td>
              <p-tableCheckbox [value]="product"></p-tableCheckbox>
            </td>
            <td>{{product.code}}</td>
            <td>{{product.name}}</td>
            <td>{{product.category}}</td>
            <td>{{product.quantity}}</td>
          </tr>
        </ng-template>
      </p-table>
    </div>

提前致谢

Answer 1

您是否使用 PrimeNG 版本 14 或更低版本？如果是这样，则模板尚未引入，您必须升级 PrimeNG 或添加您自己的组件，并将其映射到表中。

如果您想了解实际情况，可以在此处查看代码：https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts