我很困惑，因为必须制作一个包含2个列表或2＆＃34; let＆＃34;的表格分页。
在我的一个页面上，当我只使用一个列表时，我已经成功实现了分页
<div *ngFor="let group of persons">
<div *ngIf="group.name == 'all'">
<div class="row content-row" *ngFor="let person of group.array | search: term | orderBy: order | paginate: {itemsPerPage: 13, currentPage:page1, id: '1'}"
[routerLink]="['/person/edit', person.id]">
<div class="col col-md-6">{{person.name}}</div>
<div class="col col-md-2">{{person.id}}</div>
<div class="col col-md-2">{{person.place?.fullName}}</div>
<div *ngIf="person.organization?.name != null" class="col col-md-2">{{person.organization?.name}}
</div>
<div *ngIf="person.organization?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div>
</div>
</div>
<div *ngIf="group.name != 'all'">
<div class="row content-row">
<div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
</div>
<div *ngIf="showGroup == group.name">
<div class="row content-row" *ngFor="let person of group.array | paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
[routerLink]="['/person/edit', person.id]">
<div class="col col-md-6" style="padding-left:23px;">{{person.name}}</div>
<div class="col col-md-2">{{person.id}}</div>
<div class="col col-md-2">{{person.place?.fullName}}</div>
<div class="col col-md-2">{{person.organization.name}}
</div>
</div>
</div>
</div>
</div>
现在，在不同的页面上，我创建了包含人员（来自上方）和组织的表格。
我希望分页在一个分页下显示两个列表，我想要每页13个项目。我如何继续这一点，我将发布我已经制作的代码，没有分页，所以你可以看看，并希望指出我正确的方向。非常感谢你的时间。
<div class="row" style="margin-top:50px;margin-left:15px;">
<div class="card-body">
<div class="row velicinatabele">
<div class="table-col">
<div class="card table">
<div class="row header" style="">
<div class="col col-md-6">Name</div>
<div class="col col-md-2">ID</div>
<div class="col col-md-2">Location</div>
<div class="col col-md-2">Employee/Company</div>
</div>
<div *ngFor="let group of organizations">
<div *ngIf="group.name == 'all'">
<div class="row content-row" *ngFor="let organization of group.array | search: term | orderBy: order"
[routerLink]="['/organization/edit', organization.id]">
<div class="col col-md-6">{{organization.name}}</div>
<div class="col col-md-2">{{organization.id}}</div>
<div class="col col-md-2">{{organization.place?.fullName}}</div>
<div *ngIf="organization.person?.name != null" class="col col-md-2">{{organization.person?.name}}
</div>
<div *ngIf="organization.person?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div>
</div>
</div>
<div *ngIf="group.name != 'all'">
<div class="row content-row">
<div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
</div>
<div *ngIf="showGroup == group.name">
<div class="row content-row" *ngFor="let organization of group.array | paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
[routerLink]="['/organization/edit', organization.id]">
<div class="col col-md-6" style="padding-left:23px;">{{organization.name}}</div>
<div class="col col-md-2">{{organization.id}}</div>
<div class="col col-md-2">{{organization.place?.fullName}}</div>
<div class="col col-md-2">{{organization.person?.name}}
</div>
</div>
</div>
</div>
</div>
<div *ngFor="let group of persons">
<div *ngIf="group.name == 'all'">
<div class="row content-row" *ngFor="let person of group.array | search: term | orderBy: order | paginate: {itemsPerPage: 13, currentPage:page1, id: '1'}"
[routerLink]="['/person/edit', person.id]">
<div class="col col-md-6">{{person.name}}</div>
<div class="col col-md-2">{{person.id}}</div>
<div class="col col-md-2">{{person.place?.fullName}}</div>
<div *ngIf="person.organization?.name != null" class="col col-md-2">{{person.organization?.name}}
</div>
<div *ngIf="person.organization?.name == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div>
</div>
</div>
<div *ngIf="group.name != 'all'">
<div class="row content-row">
<div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
</div>
<div *ngIf="showGroup == group.name">
<div class="row content-row" *ngFor="let person of group.array | paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
[routerLink]="['/person/edit', person.id]">
<div class="col col-md-6" style="padding-left:23px;">{{person.name}}</div>
<div class="col col-md-2">{{person.id}}</div>
<div class="col col-md-2">{{person.place?.fullName}}</div>
<div class="col col-md-2">{{person.organization.name}}
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!(organizations[0].array.length > 0)" class="row noResults">
<label>Nema rezultata..</label>
</div>
<div *ngIf="organizations[0].name == 'all'" class="paggination-row">
<div class="paggination">
<pagination-controls (pageChange)="page1 = $event" id="1" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
nextLabel="Next">
</pagination-controls>
</div>
</div>
<div *ngIf="drmsorganizations[0].name != 'all' && showGroup != ''" class="paggination-row">
<div class="paggination">
<pagination-controls (pageChange)="page2 = $event" id="2" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
nextLabel="Next">
</pagination-controls>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我自己修好了。我将在下面发布答案，所以任何偶然发现这篇文章的人都可以解决他的分页问题。
如果你有2个列表，你需要它们都在一个分页中显示。如果您要显示每页12个项目，您只需要关注。
第一个列表上的执行以下操作
<div class="row content-row" *ngFor="let organization of group.array | search: term | orderBy: order | paginate: {itemsPerPage: 6, currentPage:page1, id: '1'}"
在另一个清单上
<div class="row content-row" *ngFor="let person of group.array | search: term | orderBy: order | paginate: {itemsPerPage: 6, currentPage:page1, id: '2'}"
确保第二个列表使用id：＆＃39; 2＆＃39;分页将完美地运作！
这可以用于x个列表，只需更改ID并根据自己的喜好调整每页的项目。