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”元素分页。如果 department 为空（因为它在当前显示的页面上有零个元素），那么它将收到 display:none。

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

我找到的最接近的东西是：Pagination of nested objects in angular js，其中他解释了如何从 scratch 编写自定义寻呼机，但同样，似乎没有任何方法可以计算显示多少个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>

Answer 2

Eliezer，“关键”是将变量“count”和“activePage”添加到您的部门。您可以使用类似的地图

//supouse you have a an array "departments" that is 
//an object with title,description and list -this last is an array too
this.department=department.map(d=>{
   title:d.title,
   description:d.description,
   count:d.list.length,
   activePage:0,
   list:d.list
});

那么你可以使用 split 只显示十个人

<div *ngFor="let department of myJSON">
    <h2>{{department.title}}</h2>
    <p>{{department.description}}</p>
    <ul class="list">
        <li *ngFor="let person of 
                department.list.slice(department.activePage,10*(department.activePage))">
            {{person.name}}
            {{person.phone}}
        </li>
    </ul>
    <button (click)="department.activePage++">more</button>
    <button (click)="department.activePage--">less</button>
</div>