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

【问题标题】：How to add pagination in angular project using ngx-pagination and show it's status如何使用 ngx-pagination 在 Angular 项目中添加分页并显示其状态
【发布时间】：2021-12-29 19:05:11
【问题描述】：

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

我用ngx-pagination

project

【问题讨论】：

我不明白这个问题？你能解释一下是什么吗？
嗨，@MohammadBabaei 我已经在我的项目中完成了分页。我想动态显示分页状态
在这个例子中动态意味着什么？请提供更多信息。
动态表示当我在分页中单击“1”时，状态显示“显示 1-10 个结果，共 100 个结果”，然后在分页中单击“2”，文本更改显示“显示 1-10 个100 个结果”以显示“显示 11-20 个结果，共 100 个结果”
您将页码与 (pageChange)="p = $event" 绑定到 p 并且您还有页长和总计数，因此您可以计算和呈现所有标题状态。你也可以在 doc mabye 中挖掘，所有值都会输出

标签： angular pagination single-page-application ngx-pagination

【解决方案1】：

解决办法

Stackblitz - my project

component.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);
  }
}

【讨论】：