我在我的一个项目中使用 angular 2,我正在使用 ngx-pagination 对表格进行分页。我的页面结构是这样的
parent->child1=table1
child2-table-2
child-table-3
child4-table-4
每个 child 都调用自己的休息请求并填充表格。我在父级中使用了子组件,如下所示
<div class="thirteen wide column" name="leave" id="leaveApproval">
<div class="ui extended segment">
<app-leave-approval></app-leave-approval>
<div #leaveApproval></div>
</div>
</div>
<div class="thirteen wide right floated column" #timesheetApproval name="timesheet" id="timesheetApproval">
<div class="ui extended segment">
<app-timesheetapproval></app-timesheetapproval>
</div>
</div>
<div class="thirteen wide right floated column" #resourceApproval name="resource" id="resourceApproval">
<div class="ui extended segment">
<app-resource-approval></app-resource-approval>
</div>
<div></div>
</div>
等等
在每个子组件中我都使用了 ngx-pagination
<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pgNumber};let i=index">
<pagination-controls (pageChange)="pgNumber = $event"></pagination-controls>
并且每个 child 都有唯一的 pageNumber 变量;
现在我面临的问题是,当我尝试更改一个表的页码时,它也会影响其他子表。如果我单击第一个表的第 2 页,所有其他表格将其当前页面更改为第 2 页。我做错了什么?我做的方式有什么问题吗?
最佳答案
通过在模板中指定 id 解决了我的问题
<pagination-controls id="some_id" (pageChange)="pageChanged($event)" ></pagination-controls>
和
| paginate: { id: 'foo'},
关于angular - 多个 ngx 分页错误 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45588455/