I have a PrimeNG p-table
with 3 buttons in the last column, every one of these buttons calls a specific method, I pass the same data from the HTML to the component methods via rowdata but for some reason in the component I don't have the same data : in one case I have the data relatives to the next row.
If I click the first button (dupModel(rowData)) in the component I have the rowData of the next row (wrongly). It happens only in this case, I have a lot of p-table
in my project.
For example if I click the first button in the first row I go to detail of second element, If I click to the second button in the first row I go (correctly) to the detail of the first element.
<p-table #dt [value]="ticketBundleList" [rows]="event.rows" [paginator]="true" [rowsPerPageOptions]="config.getConfig('primeng').table.page.options" [loading]="loader" [(first)]="event.first" [sortField]="event.sortField" [lazy]="true" [sortOrder]="event.sortOrder" [totalRecords]="totalElements" (onLazyLoad)="loadModelData($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th [pSortableColumn]="'createdDate'">{{'ticketbundle.table.headers.createddate' | translate }}
<p-sortIcon [field]="'createdDate'"></p-sortIcon>
</th>
<th [pSortableColumn]="'validFrom'">{{'ticketbundle.table.headers.validfrom' | translate }}
<p-sortIcon [field]="'validFrom'"></p-sortIcon>
</th>
<th [pSortableColumn]="'validUntil'">{{'ticketbundle.table.headers.validuntil' | translate }}
<p-sortIcon [field]="'validUntil'"></p-sortIcon>
</th>
<th [pSortableColumn]="'customer.name'">{{'ticketbundle.table.headers.customername' | translate }}
<p-sortIcon [field]="'customer.name'"></p-sortIcon>
</th>
<th [pSortableColumn]="'code'">{{'ticketbundle.table.headers.code' | translate }}
<p-sortIcon [field]="'code'"></p-sortIcon>
</th>
<th [pSortableColumn]="'totalPrice'">{{'ticketbundle.table.headers.totalprice' | translate }}
<p-sortIcon [field]="'totalPrice'"></p-sortIcon>
</th>
<th></th>
</tr>
</ng-template>
<!-- Body tabella -->
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.createddate' | translate }}</span>
{{rowData.createdDate | dateWithTimezone : config.getConfig('server').timezone : ('moment.withhour&min' | translate )}}
</td>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.validFrom' | translate }}</span>
{{rowData.validFrom | dateWithTimezone : config.getConfig('server').timezone : ('moment.onlydate' | translate )}}
</td>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.validuntil' | translate }}</span>
{{rowData.validUntil | dateWithTimezone : config.getConfig('server').timezone : ('moment.onlydate' | translate )}}
</td>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.customername' | translate }}</span>
{{rowData.customer?.name}}
</td>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.code' | translate }}</span>
{{rowData.code}}
</td>
<td>
<span class="ui-column-title">{{'ticketbundle.table.headers.totalprice' | translate }}</span>
{{rowData.totalPrice | currency:'EUR':'symbol'}}
</td>
<td>
<div class="text-right">
<span class="pointer info" (click)="dupModel(rowData)" matTooltip="{{'ticketbundle.table.tooltips.duplicate' | translate }}" *ngIf="loggedUserService.checkIfAllowed(['role.admin', Roles.ROLE_BACK_OFFICE])"
[matTooltipPosition]="'left'" [matTooltipShowDelay]="config.getConfig('tooltip').long.delay" [matTooltipHideDelay]="config.getConfig('tooltip').hide.delay">
<i class="material-icons icon-table">content_copy</i>
</span>
<span class="pointer light-green" (click)="selectModel(rowData)" matTooltip="{{'ticketbundle.table.tooltips.view' | translate }}" *ngIf="loggedUserService.checkIfAllowed(['role.admin', Roles.ROLE_BACK_OFFICE])"
[matTooltipPosition]="'left'" [matTooltipShowDelay]="config.getConfig('tooltip').long.delay" [matTooltipHideDelay]="config.getConfig('tooltip').hide.delay">
<i class="material-icons icon-table">dvr</i>
</span>
<span class="pointer red" (click)="delete(rowData._links.self.href)" matTooltip="{{'ticketbundle.table.tooltips.delete' | translate }}" *ngIf="loggedUserService.checkIfAllowed(['role.admin', Roles.ROLE_BACK_OFFICE])"
[matTooltipPosition]="'left'" [matTooltipShowDelay]="config.getConfig('tooltip').long.delay" [matTooltipHideDelay]="config.getConfig('tooltip').hide.delay">
<i class="material-icons icon-table">close</i>
</span>
</div>
</td>
</tr>
</ng-template>
</p-table>
COMPONENT
/**
* Route to the detailed view for the selected model
* @param model
*/
selectModel(model: any) {
super.routeToView(['/ticketBundles', this.endPointUrlService.getUserId(model._links.self.href, '/', 6)]);
}
dupModel(model: any) {
super.routeToView(['/ticketBundles', this.endPointUrlService.getUserId(model._links.self.href, '/', 6), 'copy'],
{ skipLocationChange: true });
}
Angular version: 6.0.6
PrimeNG version: 6.0.2