Javascript 角度分页:显示一组A4大小的页面
我正在使用NgbdPaginationBasic进行分页 app.module.tsJavascript 角度分页:显示一组A4大小的页面,javascript,html,angular,typescript,pagination,Javascript,Html,Angular,Typescript,Pagination,我正在使用NgbdPaginationBasic进行分页 app.module.ts import { NgbdPaginationBasic } from './pagination-basic'; 我需要创建一组A4大小的页面,页眉和页脚仅在前两页可见。我只在正文上应用了分页 app.html 身份证件 名称 电子邮件 {{item.id} {{item.first{u name}{{item.last{u name}} {{item.email} 下面是我为演示而创建的一个示例。分页
import { NgbdPaginationBasic } from './pagination-basic';
我需要创建一组A4大小的页面,页眉和页脚仅在前两页可见。我只在正文上应用了分页
app.html
身份证件
名称
电子邮件
{{item.id}
{{item.first{u name}{{item.last{u name}}
{{item.email}
下面是我为演示而创建的一个示例。分页在正文上运行良好,但页眉和页脚我希望它们隐藏在第二页之后
有没有一种方法可以做到这一点,或者我可以使用任何其他工具或东西?页面的所有三个部分(页眉、正文、页脚)应具有相同的分页标签。只需使用
*ngIf
,例如:
<div style="border:1px solid black;margin-bottom:4px" *ngIf="page <= 2"> <---
<hr/><span> HEADER </span><hr/>...
只需将*ngIf=“page<3”
添加到页眉/页脚部分。谢谢,伙计,但是我可以将尺寸设置为A4页面的尺寸吗。比如如何设置自定义的高度和宽度?
<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>