angular - 使用 datakey 进行多行选择
问题描述
我正在开发一个使用 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">
解决方案
您可能需要在每次查看新行后更新选择数组以检查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)
}
推荐阅读
- python - 如何提高在 Python 中调用 400 次的函数速度
- autocad - 为什么 AutoCAD 无法直接打开 dwf 文件?
- pytorch - 无法通过 torch.rfft 反向传播
- c++ - 无法从类成员函数返回 unique_ptr
- git - 如何更改 git 存储库的用户
- python - 将 Pandas 列内容添加到新列,以及其他原始列
- javascript - momentjs 添加的时间不在模拟时钟上持续存在
- html - 可能:自定义弹性卡
- asp.net-core - 是否应该始终在 MVC 中使用异步控件进行数据访问
- angular - 在 RGraph 中重绘后无法清除 3d 图表项