Angular, как показать * ngFor на нескольких страницах, а не в одном большом списке

Question

В настоящее время у меня есть * ng для чтения json с 50 элементами и отображения его в таблице

<table class="table" >
<thead>
    <tr>
        <th scope="col">hash</th>
        <th scope="col">size</th>
        <th scope="col">time</th>
        <th scope="col"></th>
    </tr>
</thead>
<tbody *ngFor="let data  of json">
    <tr>
        <td>{{data.hash}}</td>
        <td>{{data.size}}</td> 
        <td>{{data.time}}</td>
        <td><button class="btn btn-primary" (click)="onUpdateClick(data.hash , data.size, data.time)">Update</button></td>
    </tr>
</tbody>

Но он отображает 50 элементов, но вместо этого я хотел бы, чтобыотображать эти элементы в 10 группах элементов.

SO вместо

element1 
element2 
element3 
. 
. 
. 
element50

Это будет похоже на (стр. стр.)

element1
element2
..
element10

|p1|p2|...|p5

Я не совсем уверен, каксделать это, я должен разделить мой JSON на элементы 10, чтобы получить индекс ссылки, а затем цикл с этой ссылкой?Но как сделать так, чтобы кнопки страницы отображали определенный раздел массива?

Answer 1

Решение, которое вы ищете, это нумерация страниц, здесь

table-pagination.component.html

<table class="table" #tableEl="mdbTable" class="z-depth-1">
<thead>
    <tr>
        <th scope="col">hash</th>
        <th scope="col">size</th>
        <th scope="col">time</th>
        <th scope="col"></th>
    </tr>
</thead>
<tbody *ngFor="let data  of json; let i = index">
    <tr>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{data.hash}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{data.size}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{data.time}}</td>
        <td><button class="btn btn-primary" (click)="onUpdateClick(data.hash , data.size, data.time)">Update</button></td>
    </tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
    <tr>
      <td colspan="4">
        <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements"></mdb-table-pagination>
      </td>
    </tr>
</tfoot>

table-pagination.component.ts

import { MdbTablePaginationComponent, MdbTableDirective } from 'PATH-TO-MDB-ANGULAR-HERE';

import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'table-pagination',
  templateUrl: './table-pagination.component.html',
  styleUrls: ['./table-pagination.component.scss']
})
export class TablePaginationComponent implements OnInit, AfterViewInit {
  @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent;
  @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective
  json: any = [];
  previous: any = [];

  constructor(private cdRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.mdbTable.setDataSource(this.json);
    this.json = this.mdbTable.getDataSource();
    this.previous = this.mdbTable.getDataSource();
  }

  ngAfterViewInit() {
    this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);

    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();
    this.cdRef.detectChanges();
  }
}

Для более подробной информации: https://mdbootstrap.com/docs/angular/tables/pagination/

Answer 2

Вы можете использовать Angular-DataTables , это очень простая для реализации таблица данных.

dataTable.component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Iamout</td>
      <td>Ofinspiration</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yoda</td>
      <td>Skywalker</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Patrick</td>
      <td>Dupont</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Barack</td>
      <td>Obama</td>
    </tr>
    <tr>
      <td>7</td>
      <td>François</td>
      <td>Holland</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Michel</td>
      <td>Popo</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Chuck</td>
      <td>Norris</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Simon</td>
      <td>Robin</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Louis</td>
      <td>Lin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Zelda</td>
      <td>Link</td>
    </tr>
  </tbody>
</table>

dataTable.component.тс

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'with-options',
  templateUrl: 'with-options.component.html'
})
export class WithOptionsComponent implements OnInit {
  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers'
    };
  }
}/code>