angular - 如何使用 ngx-pagination 在 Angular 项目中添加分页并显示其状态

Question

如何在这样的角度项目中进行分页状态（动态）

我使用ngx 分页

项目

Answer 1

这里的解决方案

Stackblitz -我的项目

组件.html

<div class="text-center">
  <h1>ngx-pagination live demo</h1>
</div>

<div class="list">

  <ul
    *ngFor="
      let item of collection | paginate: { itemsPerPage: 10, currentPage: p };
      let ndx = index
    "
  >
    <li>
      {{ item }}
    </li>
  </ul>
  <div class="text-center">Showing {{start==null?1:start }} - {{last==null?10:last}} of 100 results</div>

  <pagination-controls
    (pageChange)="listCount($event)"
    (pageChange)="p = $event"
  ></pagination-controls>
</div>

app.component.css

:host {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.text-center {
  text-align: center;
}

.list {
  max-width: 550px;
  margin: auto;
}

li {
  margin-bottom: 5px;
}

app.component.ts

import { Component } from '@angular/core';
import { Console } from '@angular/core/src/console';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  collection = [];
  start;
  last;
  constructor() {
    for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }
  
  listCount(count) {
    this.start = count
    this.start = this.start * 10 - 9
    this.last = count * 10
    if (this.last > this.collection.length) {
      this.last = this.collection.length;
    }
    console.log('start'+ '      '+this.start + '      '+'last' + '      '+ this.last);
  }
}