angular - Angular2 中嵌套列表的分页

Question

我有一个正在尝试分页的嵌套项目列表，但我能找到的大多数分页实现似乎不适用于嵌套列表。

app.component.html:

<div *ngFor="let department of myJSON">
    <h2>{{department.title}}</h2>
    <p>{{department.description}}</p>
    <ul class="list">
        <li *ngFor="let person of department.list">
            {{person.name}}
            {{person.phone}}
        </li>
    </ul>
</div>

为了澄清，我在此页面上只需要一个分页元素，并且所有部门都使用它来对每 10 个“li”元素进行分页。如果部门为空(因为它在当前显示的页面上有零个元素)，那么它将收到display:none。

我尝试过 NgxPaginationModule，但它似乎不支持识别当前 ngFor 之外的元素。

我发现的最接近的是:Pagination of nested objects in angular js ，其中他解释了如何从头开始编写自定义寻呼机，但同样，似乎没有任何方法可以计算显示的 LI 数量，并且每页仅显示 10 个。

任何帮助或指导将不胜感激!

Answer 1

最后，我无法找到任何不迫使我从头开始构建完整分页的解决方案。

因此，我改为展平并重建我的数组，并重新编写 app.component.html 以删除所有嵌套循环，并使用标准 ngx-pagination .

这是我使用的 HTML 的最终版本:

app.component.html:

//itemList = current page of items.
//i = index
//person = item on page
//If a person is the first one on the page(index=0) or his department ID
//is different from the previous person's department ID, then print 
//the .deparment-section block.

<ng-template ngFor let-person let-i="index" let-itemList="ngForOf" [ngForOf]="personList | paginate: { itemsPerPage: 10, currentPage: p }">
    <div class="department-section" *ngIf="  person.department.id && (i == 0 || person.department.id != itemList[i-1].department.id)">
        <h2>{{departmentList[person.department.id].name}}</h2>
        <p>{{departmentList[person.department.id].description}}</p>                
    </div>
    <div class="person">
        {{person.name}}
        {{person.phone}}
    </div>
</ng-template>