在 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

是的，R.Richards 是正確的，添加dataKey應該可以解決問題。 但仍然沒有 dataKey 只需添加這個<p-tableCheckbox [value]="row" [pSelectableRow]="row"></p-tableCheckbox>與您的行復選框。 這應該可以工作，因為我記得我早些時候用我的代碼做過這樣的事情:)

Answer 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] 的情況下運行良好。

Answer 3

我觀察到，當您將pSelectableRow添加到tr和p-tableCheckbox ，就像在p-tableCheckbox的回答中一樣，選擇被觸發 3 次。 首先，它將選擇添加到選擇數組，其次刪除它，最后在第三次再次添加。 因此，如果您對選擇更改采取行動，則可能會出現問題。 我無法弄清楚確切的原因，奇怪的行為。

另外，請注意，此特定用例不受官方支持。

Answer 4

我在使用 p-tableCheckbox 和 pSelectableRow 時遇到了同樣的問題。 刪除 selectionMode 綁定解決了它。 在這個例子中。

Answer 5

您可以使用簡單的 css- pointer-events: none來停止復選框行為。 您的點擊仍應影響該行，但不會傳播到復選框