PrimeNG 表复选框选择 - 当我单击一个复选框时，所有复选框都会被选中

Question

我遵循了复选框选择+行编辑示例，但是当我单击一行的复选框时，它会选中所有行的复选框。

基本上，所有复选框的作用都类似于标题行中的复选框。

这是代码：

<p-table 
    #dt1  
    [value]="tabTypeClient"
    styleClass="p-datatable-striped"
    [paginator]="true"
    [rows]="10"
    [showCurrentPageReport]="true"
    [tableStyle]="{ 'min-width': '50rem' }"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [rowsPerPageOptions]="[10, 25, 50]"
    [globalFilterFields]="['_id', 'label']"
    [(selection)]="tabTypeClientSelected"
    dataKey="id" 
    editMode="row" 
>
<ng-template pTemplate="caption">
</ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 5%;">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th pSortableColumn="_id" style="width:25%">ID<p-sortIcon field="_id"></p-sortIcon></th>
            <th pSortableColumn="label" style="width:25%">Label<p-sortIcon field="label"></p-sortIcon></th>
            <th style="width:20%"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-typeclient let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="typeclient">
            <td>
              <p-tableCheckbox [value]="typeclient"></p-tableCheckbox>
            </td>
            <td>{{ typeclient._id }}</td>
            <td>
              <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="typeclient.label" required>
                </ng-template>
                <ng-template pTemplate="output">
                    {{typeclient.label}}
                </ng-template>
              </p-cellEditor>
            </td>
            <td>
              <div class="flex align-items-center justify-content-center gap-2">
                  <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(typeclient)" class="p-button-rounded p-button-text"></button>
                  <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(typeclient)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
                  <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(typeclient, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
              </div>
          </td>
        </tr>
    </ng-template>

</p-table>

有什么想法吗？ 谢谢

Answer 1

好的，我找到了。

是因为我忘记在p表中添加dataKey="_id"

Answer 2

感谢您分享这段经历。我也遇到了同样的问题。dataKey解决了它