Question

我需要知道如何在我的角度应用程序中添加分页。数据很大，所以我想像在第一个寻呼机30数组中那样在寻呼机中显示。

这是我的html文件

     <table class="table table-responsive-md text-center">
        <thead>
           <tr>
             <th>STATUS</th>
             <th>Name</th>
             <th>Patient Name</th>
             <th>Approved Amount</th>
             <th>Claimed Amount</th>
             <th>Company</th>
             <th>Submitted By</th>
             <th>Claim No</th>
           </tr>
       </thead>

      <tbody>

         <tr *ngFor="let x of data1 | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >
           <td>
             <span class="text-success">{{x.status}}</span>
           </td>
           <td >
             <div style="text-align: left;">
              <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
              {{x.member_name}}
             </div>
           </td>
          <td style="text-align: left;">{{x.patient_name}}</td>
          <td>{{x.approved_value}}</td>
          <td>{{x.claimed_value}}</td>
          <td>                                      
            <span  class="text-success" >{{x.company_id}}</span>
          </td>
          <td>{{x.submitted_at || 'not-defined'}}</td>
          <td>{{x.claim_id}}</td>

        </tr>
       </tbody>
      </table>

我正在通过http请求获取数据

this.url = 'http://url.com/insurance_IgiGen/insurance-api/get_claims.php?offset=0&limit=10';

this.clientData = this.httpClient.get<any>(this.url,
{
params: {
policy_id: this.userFilter.policy_id     
 },

}).
subscribe(data => {
console.log(data);
this.spinner.hide();

this.data1 = data.records;

});

数据太大，无法加载，因此需要分页显示，因为它将首先加载。我已经在api中添加了offset和limit。我认为这会在api中受到限制吗？因为我需要在第一个寻呼机中从api加载第一个30数组，然后在下一个寻呼机30中加载。由于数据太大，从api加载所有数据需要30分钟，这就是为什么要增加限制的原因。

Answer 1

客户端分页组件：

<div class="card-list-footer">
  <i (click)="prevPage()"
  [ngClass]="{'card-pagination-icon-disabled': currentIndex === 0}" class="fa fa-chevron-left card-pagination-icon"></i>
  <i (click)="nextPage()"
  [ngClass]="{'card-pagination-icon-disabled': currentIndex >= (totalList.length - pageCount)}"
  class="fa fa-chevron-right card-pagination-icon card-pagination-icon--right"></i>
</div>

客户端分页组件逻辑：

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

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
  private _totalPages: number;
  public totalList: Array<any> = [];

  @Input('list-items') set listItems(value) {
    if (value && value !== this.totalList) {
      this.totalList = value;
      this._totalPages  = value.length;
    }
  }

  public currentIndex = 0;

  @Input('page-count') pageCount = 5;
  @Output()  paginate = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
  }

  paginateCard() {
    this.paginate.emit(this.totalList.slice(this.currentIndex, this.currentIndex + this.pageCount));
  }

  prevPage() {
    if (this.currentIndex === 0) {
      return;
    }
    this.currentIndex -= this.pageCount;
    this.paginateCard();
  }

  nextPage() {
    if (this.currentIndex >= (this.totalList.length - this.pageCount)) {
      return;
    }
    this.currentIndex += this.pageCount;
    this.paginateCard();
  }

}

如何在表格组件中使用分页组件：

 <table class="table table-responsive-md text-center">
    <thead>
       <tr>
         <th>STATUS</th>
         <th>Name</th>
         <th>Patient Name</th>
         <th>Approved Amount</th>
         <th>Claimed Amount</th>
         <th>Company</th>
         <th>Submitted By</th>
         <th>Claim No</th>
       </tr>
   </thead>

  <tbody>

     <tr *ngFor="let x of pagedData | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >
       <td>
         <span class="text-success">{{x.status}}</span>
       </td>
       <td >
         <div style="text-align: left;">
          <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
          {{x.member_name}}
         </div>
       </td>
      <td style="text-align: left;">{{x.patient_name}}</td>
      <td>{{x.approved_value}}</td>
      <td>{{x.claimed_value}}</td>
      <td>                                      
        <span  class="text-success" >{{x.company_id}}</span>
      </td>
      <td>{{x.submitted_at || 'not-defined'}}</td>
      <td>{{x.claim_id}}</td>

    </tr>
   </tbody>
  </table>
  <app-audit-log-pagination [list-items]="data1" [page-count]="5"
              (paginate)="setCurrentPageArr($event)"></app-audit-log-pagination>

您的表组件逻辑：

public data1: any;
public pagedData: any;

ngOnInit() {
    this.url = 'http://url.com/insurance_IgiGen/insurance-api/get_claims.php?offset=0&limit=10';

   this.clientData = this.httpClient.get<any>(this.url,
     {
      params: {
        policy_id: this.userFilter.policy_id
     },

   }).
    subscribe(data => {
      console.log(data);
      this.spinner.hide();

      this.data1 = data.records;
      this.pagedData = data.records.slice(0,5);
    });
 }

 setCurrentPageArr(slicedArr: Array<any>) {
   this.pagedData = slicedArr;
 }

Angular Bootstrap如何添加分页

1 个答案: