多NGX分页错误-角度2 [英] multiple ngx pagination error-angular 2

查看:0
本文介绍了多NGX分页错误-角度2的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的一个项目使用的是角度2,对表进行分页使用的是NGX分页。我的页面结构如下

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

每个子项调用自己的REST请求并填充表。我在父项中使用子组件,如下所示

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
<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分页

<tr *ngFor="let data of exitProcessPendingList | paginate: { itemsPerPage: 7, currentPage: pgNumber};let i=index">

<pagination-controls (pageChange)="pgNumber = $event"></pagination-controls>

并且每个孩子都有唯一的pageNumber变量;

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

推荐答案

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

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

| paginate: { id: 'foo'},

这篇关于多NGX分页错误-角度2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆