[英]primeng : Datatable not binding selection property asychronously
I am showing a p-datatable inside a p-dialog in one of my component. 我正在其中一个组件的p对话框中显示p数据表。 If a user has previously selected few rows from this table, I need to show them selected when the user visits the p-dialog next time.
如果用户先前已经从该表中选择了几行,那么我需要在用户下次访问p对话框时显示选中的行。
I am passing an array of selected items to the selection
property of the p-datatable. 我将一组选定项传递给p数据表的
selection
属性。 However, the rows are not shown selected on the screen. 但是,行未显示在屏幕上。
If I re-select the same rows, I get them twice in selection
property, which means the pre-selected rows are rightly kept in selection
property but somehow not binded to the html
. 如果我重新选择相同的行,则会在
selection
属性中获得两次,这意味着预选的行正确地保留在selection
属性中,但不以某种方式绑定到html
。
I have tried to wrap the entire p-dialog in an *ngIf
expecting it to be created only after the data has been received but it made no difference. 我试图将整个p对话框包装在
*ngIf
期望仅在接收到数据之后才创建它,但没有任何区别。
What can I do to bind the selected rows to the p-datatable. 如何将选定的行绑定到p数据表。
<div *ngIf="data && data.length" class="col-sm-12">
<p-dataTable #ListRef [value]="data" rowHover="true" [multiSortMeta]="multiSortMeta" (onRowSelect)="onSelect($event)" [(selection)]="selectedData" (onRowUnselect)="onUnSelect($event)">
<p-column field="launchDate" header="Launch Date" [sortable]="true"></p-column>
<p-column field="endDate" header="End Date" [sortable]="true"></p-column>
</p-dataTable>
</div>
I have also tried fetching the reference using ViewChild
and assigning the values to the selection
property there. 我也尝试过使用
ViewChild
获取引用,并将值分配给其中的selection
属性。 That too made no difference. 那也没什么不同。
I however noticed that the issue does not come if I have the data
and selectedData
already available in my ngOnInit
method. 但是,我注意到如果我的
ngOnInit
方法中已经有可用的data
和selectedData
则不会出现此问题。
Any ideas ? 有任何想法吗 ?
Though I missed it at first, I later found that there is a property dataKey
which can be assigned for comparing the selected rows against total rows. 尽管我一开始很想念它,但后来我发现有一个属性
dataKey
可以分配给比较所选行和总行。 This worked for me. 这对我有用。 The only change was to assign a field name to uniquely match the rows
唯一的更改是分配字段名称以唯一匹配行
<p-dataTable #fundListRef [value]="data" rowHover="true" [(selection)]="selectedData" (onRowSelect)="onFundSelect($event)" (onRowUnselect)="onFundUnSelect($event)"
dataKey="id">
The p-datatable documentation says that it uses a map comparison which was somehow not working for my case. p-datatable文档说它使用地图比较,这在某种程度上不适用于我的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.