Question

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

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>

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
});

然后您可以使用拆分仅显示十个人

<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 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中嵌套列表的分页

3 个答案: