在 PrimeNg 表中同时使用复选框选择和行选择

Question

我正在使用 PrimeNg 表组件，需要实现行选择。我有以下代码：

    <p-table
        [value]="data"
        [columns]="columns"
        [(selection)]="selectedItems"
        selectionMode="multiple">
    <ng-template pTemplate="header">
        <tr>
            <th>
                <p-tableHeaderCheckbox style="margin-left: 5px;"></p-tableHeaderCheckbox>
            </th>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr [pSelectableRow]="row">
            <td>
                <p-tableCheckbox [value]="row"></p-tableCheckbox>
            </td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </ng-template>
</p-table>

基本上，我使用的是复选框选择和多重选择，没有元键，如此处文档中给出的。现在，当我单击该行时，它正在选择并且复选框也被选中。但是当我点击复选框时，它没有被选中。如果我单击Select All，那么它也会选择所有行。aria-checked当我使用开发人员工具进行检查时，即使检测到单击，它也不会变为true。

有解决此问题的解决方法吗？

Answer 1

@Arun 的答案是正确的。如果有人也偶然发现这个问题并且时间不够，我只是添加一些格式;)：

<ng-template pTemplate="body" let-data>
    <tr [pSelectableRow]="data">
       <td>
          <p-tableCheckbox [pSelectableRow]="data" [value]="data"></p-tableCheckbox>
       </td>
    </tr>
</ng-template>

即使不向 tableCheckbox 提供 [index]，它也能正常工作。

Answer 2

是的，R.Richards 是对的，添加dataKey应该可以解决问题。但仍然没有 dataKey 只需将其添加<p-tableCheckbox [value]="row" [pSelectableRow]="row"></p-tableCheckbox>到您的行复选框中即可。这应该可以工作，因为我记得我之前用我的代码做过类似的事情:)