.html
<!-- 菜单栏 -->
<div class="header-menu">
<ul nz-menu nzMode="horizontal" nzTheme="dark">
// 上一页
<i nz-icon nzType="left" nzTheme="outline" (click)="prePage()"></i>
<ng-container *ngFor="let module of Menus; let i = index; ">
<li *ngIf="getShowPages(i)" nz-menu-item>
{{module.title}}
</li>
</ng-container>
// 下一页
<i nz-icon nzType="right" nzTheme="outline" (click)="nextPage()"></i>
</ul>
</div>
.ts
menuPage: any = {
curPage: 1,
total: 10,
pageSize: 2
}
prePage() {
if (this.menuPage.curPage <= 1) {
return
}
this.menuPage.curPage--
}
nextPage() {
if (this.menuPage.curPage * this.menuPage.pageSize >= this.menuPage.total) {
return
}
this.menuPage.curPage++
}
getShowPages(index: number) {
return (this.menuPage.curPage - 1) * this.menuPage.pageSize < index + 1 &&
index + 1 < (this.menuPage.curPage) * this.menuPage.pageSize + 1
}