Angular Пагинация: отображение набора страниц формата А4 - PullRequest
Новая
       5

Angular Пагинация: отображение набора страниц формата А4

0 голосов
/ 31 января 2020

Я работаю над разбиением на страницы, используя NgbdPaginationBasic app.module.ts 

import { NgbdPaginationBasic } from './pagination-basic';

Мне нужно создать набор страниц в формате A4 с верхним и нижним колонтитулом, видимыми только на первых двух страницах. Я применил нумерацию страниц только к приложению для тела. 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 , который я создал для демонстрации. Нумерация страниц работает хорошо на теле, но верхний и нижний колонтитулы я хочу, чтобы они были скрыты после 2-й страницы.

Есть ли способ сделать это или любой другой инструмент или вещь, которую я могу использовать? Все три части страницы (заголовок, тело, нижний колонтитул) должны иметь одинаковый тег нумерации страниц.

1 Ответ

1 голос
/ 31 января 2020

Просто используйте *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>

Надеюсь, это поможет!

...