使用 datakey 进行多行选择答案

【问题标题】：Multiple row selection with datakey使用 datakey 进行多行选择
【发布时间】：2019-07-12 09:28:39
【问题描述】：

我正在开发一个使用 PrimeNg 作为 UI 库的项目。在处理表格时，我发现 datakey 属性并没有选择所有相关的行。当我控制台记录选择数组时，它显示只选择了 1 个。但是 UI 会选择所有相关的行。

例如，我有一个包含多个 trackingNo 的行的表。每行可能有相同的 trackingNo。当我选择其中一行时，它应该选择具有相同 trackingNo 的所有相关行。

我错过了什么吗？或者它是一个错误？

    <p-table 
                     [(selection)]="selectedRows"
                     [columns]="cols"
                     [dataKey]="'trackingNo'"
                     [selectionMode]="'multiple'"
                     [lazy]="false"
                     [rows]="20"
                     [value]="values$ | async">

【问题讨论】：

这不是错误。这行得通。发布你的 ts 代码
同时发布您的数据输出

标签： angular primeng primeng-turbotable

【解决方案1】：

您可能需要在每次看到新行后更新选择数组以检查trackingNo

这个汽车年基地示例，我选择当前选择汽车年的每个汽车基地

<p-table [columns]="columns"  [value]="carsData" selectionMode="multiple"
              [(selection)]="selectedCars" (onRowSelect)="onRowSelect($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
            <td *ngFor="let col of columns" class="ui-resizable-column">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

组件

onRowSelect(event) {
    const selectedCar = event.data;
    setTimeout(() => {
      this.selectedCars = cars.filter(car => car.year == selectedCar.year);
    }, 0)
  }

demo ??

【讨论】：