多个ngx分页错误-角度2

Posted 2023-02-22

【中文标题】多个ngx分页错误-角度2

【英文标题】：multiple ngx pagination error-angular 2

【发布时间】：2018-01-17 05:05:28

【问题描述】：

我在我的一个项目中使用 angular 2，我正在使用 ngx-pagination 对表格进行分页。我的页面结构是这样的

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

每个孩子都调用自己的休息请求并填写表格。我在父级中使用了子组件，如下所示

<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>

每个孩子都有唯一的pageNumber变量；

现在我面临的问题是，当我尝试更改一个表的页码时，它也会影响其他子表。如果我单击第一个表的第 2 页，所有其他表格将其当前页面更改为第 2 页。我做错了什么？我做的方式有什么问题吗？

【参考方案1】：

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

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

和

| paginate:  id: 'foo',

【讨论】：

我想我会建议某人始终使用该 ID。由于我的应用程序的结构方式（我使用导航选项卡-> ngx-tabset），我遇到了这个问题，我没有意识到同一页面中有多个页面。