Пагинация на Angular 6

Question

Я пытаюсь создать таблицу, которая содержит имя пользователя и достижения.Это динамические данные, только что сгенерированные MySQL, которые я вызываю с помощью функции .subscribe на angular 6.

Моя проблема сейчас заключается в том, как добавить нумерацию страниц в моей таблице данных, чтобы сделать отзывчивое табличное представление.

Моя страница прямо сейчас:

Мой dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  templateUrl: './activity-dashboard.component.html',
  styleUrls: ['./activity-dashboard.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class ActivityComponent implements OnInit {
  tablePresetColumns;
  tablePresetData;

  constructor(
    private activityService: ActivityService,
    private router: Router
  ) {}

  public apiData;

  ngOnInit() {
    this.activityService.getAchievement().subscribe((res) => {
      this.apiData = res;
      var ids = [
        ['Username', 1],
        ['Role', 2],
        ['today', 3],
        ['weekly', 4],
        ['monthly', 5],
        ['yearly', 6]
      ];
      const result = Object.keys(res).map(o => ids.map(
        ([key, id]) => ({
          id,
          content: res[o][key]
        })));
      this.tablePresetData = result;
    });
  }
}

Мой dashboard.component.html:

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul class="pagination">
        <li class="disabled"><i class="icon icon-arrow-left"></i></li>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li></li>
        <li>10</li>
        <li><i class="icon icon-arrow-right"></i></li>
      </ul>
    </div>
</div>

До сих пор я пытался сделать нумерацию страниц в виде HTML, но я запутался, комбинируя свои данные с функцией нумерации страниц, которую я создам.

Что я должен сделать, чтобы нумерация страниц работала как ожидание?

Answer 1

вы можете использовать пакет ngx-pagination https://www.npmjs.com/package/ngx-pagination вместо того, чтобы заново изобретать колесо с помощью

, импортировать его в свой модуль

// app.module.ts
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module

@NgModule({
    imports: [... NgxPaginationModule ...], // <-- include it in your app module
})
export class MyAppModule {}

и в свой шаблон

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul>
        <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
      </ul>

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

где p - текущая страница, которая будет отображаться, поэтому в ваш компонент добавьте

public p: number = 1;

полную документацию можно найти здесь https://github.com/michaelbromley/ngx-pagination