[英]Showing more rows of a table with pagination in angular
我在 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);
}
}
如果您及時獲得所有數據,您可以使用
<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 也可以將最后一個事務或您使用的其他變量作為參數
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.