在 ngx-pagination 上添加第一页和最后一页 - 角度 9答案

【问题标题】：Adding first page and last page on ngx-pagination - angular 9在 ngx-pagination 上添加第一页和最后一页 - 角度 9
【发布时间】：2020-08-08 23:58:58
【问题描述】：

我正在为我的 Angular 应用程序使用 ngx-pagination 库。除了上一个和下一个按钮，我想再添加 2 个按钮直接进入最后一页或第一页。我怎样才能做到这一点？

模板逻辑

import { Component, OnInit } from '@angular/core';
import { TestimonialsDataService } from '../../services/testimonials-data.service';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {
  public authors: Object = {};
  public pageList: number = 1;

  constructor(private _testimonialsService: TestimonialsDataService) { }

  ngOnInit(): void {
    this._testimonialsService.getData().subscribe(data => this.authors = data);
  }

}

<div class="container">
  <div class="content">
    <div class="card" *ngFor="let author of authors['user'] | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}" >
      <div class="card-content">
        <img class="image" src="{{author.image}}"/>
        <p class="author">{{author.name}}</p>
        <p class="job">{{author.job}}</p>
        <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p>
        <p class="country"><span class="flag flag-IT"></span><span class="country">{{author.country}}</span></p>
      </div>
    </div>
  </div>

  <pagination-controls id="list-pagination" lastLabel="Next" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls>

</div>

【问题讨论】：

标签： javascript arrays angular pagination ngx-pagination

【解决方案1】：

您可以自定义分页模板并尝试添加这些按钮

    <pagination-template #p="paginationApi" [id]="config.id 
     (pageChange)="config.currentPage = $event">
            <div class="custom-pagination">
                <div class="pagination-first-page">
                  <span (click)="p.setCurrent(1)">
                    First Page 
                  </span> 
                </div>
              <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
                <span *ngIf="!p.isFirstPage()" (click)="p.previous()">
                  < 
                    </span> 
                </div> 
                <div class="page-number" *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                      <span (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">{{ page.label }}</span>
                    <div *ngIf="p.getCurrent() === page.value">
                      <span>{{ page.label }}</span>
                    </div>
                </div>
                <div class="pagination-next" [class.disabled]="p.isLastPage()">
                  <span *ngIf="!p.isLastPage()" (click)="p.next()"> > </span>
                </div>
                <div class="pagination-last-page">
                  <span (click)="p.setCurrent(p.getLastPage())">
                    Last Page 
                  </span> 
                </div>
            </div>
        
          </pagination-template>

【讨论】：