Question

我在ng-for处有多个分页。对于多个实例，我正在使用ng-for中的变量来重复分页，但是（pagechange）事件正在使数据变异。当我更改子页面中的页面时，它正在更改数据（first_name）。我有一个转载的问题stackBlitz

我也尝试过使用索引，但是它干扰了主分页。

<ul>
    <div *ngFor="let item of collection | paginate: {itemsPerPage:3, currentPage: page,id: mainPagination}; let i = index;">
        <div class="user">
            {{ i + 1 }}. {{ item.first_name }} 
            <!-- <br>Child Pagination -->
            <div class="childPagination" *ngFor="let address of item.address | paginate: {itemsPerPage:3, currentPage: item['first_name'],id: item['first_name']}" style="background-color:#18bc9c"> 
                {{ address.friend }}
            </div>
            <pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>
        </div>
    </div>
</ul>
<pagination-controls (pageChange)="page = $event" [id]= "mainPagination" class="my-pagination"></pagination-controls>

Answer 1

它来自您孩子的pageChange事件。您正在尝试为项目['first_name']（实际上是第2页）分配页码。

<pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"></pagination-controls>

pageChange 是一个发出页码的事件。

我认为您可以找到一种方法，以从文档https://www.npmjs.com/package/ngx-pagination的孩子那里获得的页码获取页面数据。

ngx分页，如何使用NgFor进行多个分页？我的代码出现问题，（页面更改）正在处理组件数据

1 个答案: