无法在prime ng表的每一行添加复选框

Question

我正在尝试在 prime ng 表中添加复选框，但出现以下错误

vendor.js:73494 ERROR NullInjectorError: R3InjectorError(AppModule)[Table -> Table]: 

。这就是我正在尝试创建的表组件，它将根据子组件动态添加行和列。这是同样的 stackblitz。不知道我做错了什么，但无法在每一行添加复选框

https://stackblitz.com/edit/uvubg7?file=package.json

<app-prime-table
  [data]="data"
  [columns]="columns"
  [globalFilters]="columns"
  [displayFilter]="true"
  [customBodyTemplate]="customBodyTemplate"
>
</app-prime-table>
<ng-template #customBodyTemplate let-rowData>
  <tr>
    <td *ngFor="let col of columns">
      <div *ngIf="col.type == 'checkbox'">
        <input type="checkbox" />
        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
      </div>
      <ng-container *ngIf="col.type !== 'checkbox'">
        <div *ngIf="!col.type">{{ rowData[col.field] }}</div>
        <div *ngIf="col.type === 'date'">
          {{ formatDate(rowData[col.field]) }}
        </div>
      </ng-container>
    </td>
  </tr>
</ng-template>

Answer 1

复选框选择

还可以通过将列的 selectionMode 属性启用为 multiple，使用复选框来处理多重选择。

<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<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>

表格复选框选择