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.

之外的元素

我发现的最接近的东西是：，其中他解释了如何从 scratch 编写自定义寻呼机，但同样，没有似乎有任何方法可以计算显示了多少个 LI，并且每页仅显示 10 个。

如有任何帮助或指导，我们将不胜感激！

Answer 1

Eliezer，"key" 已将变量 "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>

Answer 2

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

因此，我改为展平并重建数组，re-wrote 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 3

我能够通过创建一个新组件来解决这个问题。这样，更容易实现前端分页，并且最大限度地减少了嵌套的 NgFor。

这是我要表达的示例代码：

父组件：

<div *ngFor="let res of result">
    <p>{{res.name}}</p>
</div>

<app-child [holder]="res"></app-child>

子组件

<div *ngFor = "let res1 of holder">
    <p>{{res1.middleName}}</p>
</div>

注意：在您的子组件中应用分页逻辑。

Angular2 中嵌套列表的分页

Pagination on nested lists in Angular2

pagination

nested-loops

ngfor

angular