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

【问题标题】：Using checkbox selection and row selection together in PrimeNg table在 PrimeNg 表中同时使用复选框选择和行选择
【发布时间】：2021-02-05 13:15:11
【问题描述】：

我正在使用 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>

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

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

【问题讨论】：

尝试将dataKey 属性添加到 p 表。假设你在实际数据中有一些东西要输入。

标签： javascript angular typescript primeng

【解决方案1】：

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

【讨论】：

pSelectableRow 不是 p-tableCheckBox 的属性

【解决方案2】：

@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] 的情况下也能正常工作。

【讨论】：

【解决方案3】：

我观察到，当您将 pSelectableRow 添加到 tr 和 p-tableCheckbox 时，就像在 @Arun 的答案中一样，选择会被触发 3 次。首先，它将选择添加到选择数组，其次将其删除，最后在第三次再次添加。因此，如果您对选择更改采取行动，则可能会出现问题。我无法弄清楚确切的原因，奇怪的行为。

另外，请注意这个特殊用例不是officially supported。

【讨论】：

【解决方案4】：

我在使用 p-tableCheckbox 和 pSelectableRow 时遇到了同样的问题。删除 selectionMode 绑定解决了它。如this 示例。

【讨论】：

【解决方案5】：

您可以使用简单的 css - pointer-events: none 停止复选框行为。您的点击仍应影响该行，但不会传播到复选框

【讨论】：