Angular，如何在多个页面中而不是在一个大列表中显示 *ngFor

Question

目前我有一个 *ngFor 读取包含 50 个元素的 json 并将其显示在表格中

<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 个元素组中显示这些元素。

所以而不是

element1 
element2 
element3 
. 
. 
. 
element50

它就像（p 是页面）

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

一个很好的方法是搜索分页，或者更好地查看 here:

这可以用于 *ngFor 和列表。 安装到项目后不要忘记将其输入到模块中。 你可以用

安装它

npm install ngx-pagination --save

 <ul>
  <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
</ul>

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

记得查看链接了解更多信息。

Answer 3

您可以使用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.ts

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>