多个 ngx 分页 error-angular 2

Question

我正在为我的一个项目使用 angular 2，我正在使用 ngx-pagination 进行分页 tables.The 我的页面结构是这样的

parent->child1=table1
        child2-table-2
        child-table-3
        child4-table-4

每个 child 调用自己的 rest 请求并填充 table.I 已使用 parent 中的 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>

等

并且在每个 child 组件中我都使用 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 变量；

现在我面临的问题是，当我尝试更改一个table的页码时，它会影响其他child tables 作为 well.If 我点击第一个 table 的第 2 页，所有其他 tables 将他们的当前页面更改为第 -2.What 我做错了吗？我这样做有什么问题吗？

Answer 1

通过在模板中指定 id 解决了我的问题

<pagination-controls  id="some_id" (pageChange)="pageChanged($event)" ></pagination-controls>

和

| paginate: { id: 'foo'},

Answer 2

补充了第一个答案，在您的 component.ts 中，您必须为 currentPage 和 (pageChange) 事件声明第二个变量。

你的component.ts

pageActual: number = 1;
  paginaActual2:number =1;

你的component.html

//first table    
<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pageActual};let i=index">
        <pagination-controls (pageChange)="pageActual= $event"></pagination-controls>
//second table    
<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pageActual2};let i=index">
        <pagination-controls (pageChange)="pageActual2= $event"></pagination-controls>

多个 ngx 分页 error-angular 2

multiple ngx pagination error-angular 2

angular2-directives

angular2-template

angular2-services

angular