ng2智能表中的大量数据加载问题

Question

我无法使用ng2智能表加载大量数据。我也有搜索功能，并且数据库中有1k +条记录。我们正在使用rest API加载数据。什么是获取数据的解决方案-分页或延迟加载？

我尝试了分页，但无法获取pagerPageKey。我的专栏也是动态的。

invoice.component.ts

import { LocalDataSource } from 'ng2-smart-table/lib/data-source/local/local.data-source';
import { DataService } from './data.service';
import { HttpErrorResponse  } from '@angular/common/http';
import * as $ from 'jquery';
import { Router,ActivatedRoute } from '@angular/router';
import { BsModalService,BsModalRef } from 'ngx-bootstrap/modal';


@Component({
  selector: 'app-invoice',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent implements OnInit {

  bsModalRef: BsModalRef;
  source: LocalDataSource;

  constructor(private dataService: DataService,private router: Router,private modalService: BsModalService,activatedRoute: ActivatedRoute) {

    this.settings = Object.assign({}, this.mySettings);



    activatedRoute.params.subscribe(val => {
      var invStatus = activatedRoute.snapshot.params['status'];
      sessionStorage.setItem('invStatus',invStatus);
      this.getInvoices();
    });


  }

  i = 0;
  settings;
  mySettings = {
    actions:{
      add:false,      
      delete:false,
      position:'left',
      columnTitle:'Actions',
      custom: [{name: 'file',title: '<img src="assets/images/Buttonfilelink.png" align="absmiddle" />'},
               {name: 'download',title: '<img src="assets/images/download.png" align="absmiddle" />'}]
    },
    edit: {
      editButtonContent: '<i class="glyphicon glyphicon-edit"></i>',
      saveButtonContent: '<i class="glyphicon glyphicon-ok"></i>',
      cancelButtonContent: '<i class="glyphicon glyphicon-remove"></i>',
      confirmSave: true
    },
    // hideSubHeader: true,
    mode: 'inline',
    columns: {}
  };

  ngOnInit() {

  }


//getInvoiceListAction
  getInvoices(){
    $('#overlay_login').show();
    var getinvStatus=sessionStorage.getItem('invStatus');
    this.dataService.getInvoiceList(getinvStatus,'1')
    .subscribe(
      (data)=>
      {
        //alert(JSON.stringify(data));

        this.mySettings.columns= data.titleInvoiceCaptions[0];
        this.settings = Object.assign({}, this.mySettings);

        this.source=data.titleInvoiceList;

        this.source = new LocalDataSource(data.titleInvoiceList);

        $('#invStatus').text(getinvStatus);
        $('#overlay_login').hide();  
      }
    );
}

// show all invoices
showAllInvoices(){
  sessionStorage.setItem('invStatus','All');
  this.getInvoices();
}


onSearch(query: string = '') {
  this.source.setFilter([
    // fields we want to include in the search
    {
      field: 'venueName',
      search: query
    },
    {
      field: 'supplierName',
      search: query
    },
    {
      field:'invoiceDate',
      search: query
    },
    {
      field:'invoiceNo',
      search: query
    },
    {
      field:'uid',
      search: query
    }
  ], false);
  // second parameter specifying whether to perform 'AND' or 'OR' search 
  // (meaning all columns should contain search query or at least one)
  // 'AND' by default, so changing to 'OR' by setting false here
}

customFunction(event){
  //alert (JSON.stringify('Requesting for file UID - '+event.data.uid));

  //console.log(event);
  if(event.action=='file'){
    this.bsModalRef = this.modalService.show(ModalContentComponent,{class: 'modal-lg'});
  }else{
    alert(JSON.stringify(event.action+' Work in process.'));
  }

}  



onSaveConfirm(event){
  var sendData = {"uid" : event.newData.uid,"notes" : event.newData.notes,"status": event.newData.status,};
  this.dataService.approveInvoice(sendData)
    .subscribe(
      (data)=>
      {
        //alert (JSON.stringify(data));
        console.log(data);
      event.confirm.resolve(event.newData);
  },
  (err: HttpErrorResponse) => {
    if (err.error instanceof Error) {
      console.log("Client-side error occured.");
    } else {
      console.log("Server-side error occured.");
    }
  });
}


// Refresh data for invoice list 
loadData(): void {
  window.location.reload();
}



}


/* This is a component which we pass in modal*/
@Component({
  template: `
  <div class="modal-header">
  <h4 class="modal-title pull-left">Invoice</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
<div class="mb" style="text-align:center;">Zoom&nbsp;
    <button (click)="incrementZoom(-0.1)" type="button">-</button>&nbsp;
    <input style="width:40px;text-align: center;" type="number" placeholder="Zoom" [(ngModel)]="zoom" pattern="-?[0-9]*(\.[0-9]+)?">&nbsp;
    <button (click)="incrementZoom(0.1)" type="button">+</button>&nbsp;
    Page&nbsp;
    <button (click)="incrementPage(-1)" type="button">Previous</button>&nbsp;
    <input style="width:40px;text-align: center;"  type="number" placeholder="Page" [(ngModel)]="page" pattern="-?[0-9]*(\.[0-9]+)?">&nbsp;
    <span *ngIf="pdf">of {{ pdf.numPages }}</span>
    <button (click)="incrementPage(1)"  type="button">Next</button>
</div>

<pdf-viewer [src]="pdfSrc" [zoom]="zoom" [(page)]="page" [original-size]="true" [render-text]="false" [show-all]="false" [stick-to-page]="false" [fit-to-page]="true" style="display: block;"></pdf-viewer>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
</div>
  `
})

export class ModalContentComponent implements OnInit {
  constructor(public bsModalRef: BsModalRef) {}
  page = 1;
  zoom = 0.8;
  pdf='';
  pdfSrc: string = 'assets/test1.pdf';
    ngOnInit() {}

  incrementPage(amount: number) {
    this.page += amount;
  }

  incrementZoom(amount: number) {
    this.zoom += amount;
  }
}```


invoice.component.html

```<ng2-smart-table [settings]="settings" [source]="source" (custom)="customFunction($event)" (editConfirm)="onSaveConfirm($event)"></ng2-smart-table>```

I am expecting data to be load on request of pagination and also search would work for all data. Please do need full.