我正在使用NgbdPaginationBasic app.module.ts进行分页
import { NgbdPaginationBasic } from './pagination-basic';
我需要创建一组A4大小的页面,并且页眉和页脚仅在前两页中可见。我仅对身体应用了分页app.html
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
这是我为演示而创建的StackBlitz。分页在身体上工作正常,但页眉和页脚我希望它们在第二页之后隐藏。
有没有办法或者我可以使用的任何其他工具或东西?页面的所有三个部分(页眉,正文,页脚)应具有相同的分页标签。
只需使用*ngIf
,例如:
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2"> <---
<hr/><span> HEADER </span><hr/>...
您的代码:
<div>
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2">
<hr/><span> HEADER </span><hr/>
<div class="intro mt-3 ml-3">
<span>John Doe</span>
<br/>
<span>99/123.342 LAT Street</span>
<br/>
<span>Mars Community</span>
<br/>
<span>XYZ Country</span>
<br/>
<span>Ph. 123243423423</span>
<br/>
<br/>
<span class="mt-2">Dear John</span>
<br/>
</div>
</div>
<div style="border: 1px solid red">
<hr/><span style="color : navy">MAIN BODY</span><hr/>
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>
<tr *ngFor="let item of data | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>{{item.id}}</td>
<td>{{item.first_name}}{{item.last_name}}</td>
<td>{{item.email}}</td>
</tr>
</table>
</div>
<div style="border :1px solid black;margin-top:3px" *ngIf="page <= 2">
<hr/><span> Footer </span><hr/>
<p><strong>PLEASE READ THIS</strong><p>
<span>THIS IS THE FOOTER. HEADER AND FOOTER TO BE DISPLAYED FOR PAGES 1 and 2 ONLY </span>
</div>
<div>
<ngb-pagination [pageSize]="25" [collectionSize]="100" [(page)]="page" aria-label="Default pagination"></ngb-pagination>
<hr>
希望能帮助到你!
谢谢,但是我可以将尺寸设置为A4页面的尺寸吗?像我如何设置自定义的高度和宽度?