在 angular 中显示带有分页的表格的更多行

Question

我在 angular 上有一个表格，显示来自 API 的数据，我希望能够只显示有限数量的行，例如前 5 行，并添加一个显示更多的选项，如果用户想要查看其他行。

这是我用于file-table.component.html的代码

<div class="centered-content">
  <table class="table">
    <thead>
      <tr>
        <th>CARD_NUMBER</th>
        <th>TRANSACTION_AMOUNT</th>
        <th>TERMINAL_ID</th>
        <th>EXTERNAL_STAN</th>
        <th>TRANSACTION_DATE</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of Transactions[1].csvData; let i = index">
        <th>{{ row.CARD_NUMBER }}</th>
        <td>{{ row.TRANSACTION_AMOUNT }}</td>
        <td>{{ row.TERMINAL_ID }}</td>
        <td>{{ row.EXTERNAL_STAN }}</td>
        <td>{{ row.TRANSACTION_DATE }}</td>
      </tr>
    </tbody>
  </table>
</div>

对于file-table.component.ts 。

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../../services/crud.service';
@Component({
  selector: 'app-file-table',
  templateUrl: './file-table.component.html',
  styleUrls: ['./file-table.component.scss'],
})
export class FileTableComponent implements OnInit {
  Transactions: any = [];
  constructor(private crudService: CrudService) {}

  ngOnInit(): void {
    this.crudService.GetTransactions().subscribe((res) => {
      console.log(res);
      this.Transactions = res;
    });
  }
}

这是用于获取数据的服务：

import { Injectable } from '@angular/core';
import { Tansaction } from './Transactions';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import {
  HttpClient,
  HttpHeaders,
  HttpErrorResponse,
} from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class CrudService {
  // Node/Express API
  REST_API: string = 'http://localhost:4000/trans-list';
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  constructor(private httpClient: HttpClient) {}

  // Get all objects
  GetTransactions() {
    return this.httpClient.get(`${this.REST_API}`);
  }
  // Error
  handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
      // Handle client error
      errorMessage = error.error.message;
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
}

Answer 1

如果您及时获得所有数据，您可以使用

  <tr *ngFor="let row of Transactions[1].csvData|slice:0,(page+1)*5; let i = index">
    <th>{{ row.CARD_NUMBER }}</th>
     ...
  </tr>
  <button *ngIf="(page+1)*5<Transactions[1].csvData.length"
          (click)="page=page+1" >
         5 more
  </button>

  page:number=0
  

如果您想逐步获取数据，您的服务需要返回“下 5 行”和总行数

所以，我想你的服务有一个 function 像

  GetTransactionsPaginate(page:number) {
    return this.httpClient.get(`${this.REST_API}`,{page:page});
  }    

比返回和 object 喜欢：

   {
     totalRows:300
     data:[{CARD_NAME:"..."},{CARD_NAME:"..."}]
   }

你有一个 function

   Transactions:any[]=[] //<--declare at first as empty array
   page:number=0;

   getNewData(){
     this.crudService.GetTransactionsPaginate(this.page).subscribe(res=>{
       this.page++;
       this.Transactions=this.Transactions.concat(res.data)
       this.total=res.totalRows;
     })
   } 

好吧，服务的 function 也可以将最后一个事务或您使用的其他变量作为参数