Mat-paginator无法在mat-table

如何解决Mat-paginator无法在mat-table

我正在批量将数据加载到我的mat-table中。该API可以正常工作并显示数据，但是当我单击mat-paginator的下一个按钮时，它将显示下一批100，然后禁用所有导航按钮。 Image showing mat-paginator

在mat-pagonator中，我添加了pageEvent并在.ts文件中定义了它的功能。

.html文件上的分页器

 <mat-paginator #paginator
                 [length] ="totalRecords"
                 [pageSize]="100"
                 (page)="pageEvent = $event; changePage($event)" showFirstLastButtons>
  </mat-paginator>

这里，getIntegrationErrors是将数据与数据源绑定的函数。但是由于页面更改事件使调用不在该功能内进行，因此我不得不在changePage函数中再次绑定数据。 .ts文件

import { Component,OnInit,ViewChild,AfterViewInit,Inject } from '@angular/core';
import { FormControl,Validators,FormsModule,ReactiveFormsModule } from '@angular/forms';
import { RepositoryService } from '../shared/services/repository.service';
import { Integration } from '../_interfaces/integration.model';
import { MatTableDataSource,MatPaginator,MatSort } from '@angular/material';
import { animate,state,style,transition,trigger } from '@angular/animations';
import { IntegrationWrapper } from '../_interfaces/integrationWrapper.model';
import { PageEvent } from '@angular/material/paginator';
import { TranslateService,TranslateParser } from '@ngx-translate/core';
import { map } from 'jquery';
import { tap } from 'rxjs/operators';
//import { MyMatPaginatorIntl } from '../paginator/MyMatPaginatorIntl';

@Component({
  selector: 'app-integration',templateUrl: './integration.component.html',styleUrls: ['./integration.component.css'],animations: [
    trigger('detailExpand',[
      state('collapsed',style({ height: '0px',minHeight: '0',display: 'none' })),state('expanded',style({ height: '*' })),transition('expanded => collapsed',[animate('225ms cubic-bezier(0.4,0.0,0.2,1)')]),transition('collapsed => expanded',1)')])
    ]),],})
export class IntegrationComponent implements OnInit {

  public integrate: Integration[];
  public integrate2: IntegrationWrapper;
  public displayedColumns = ['EntityType','SourceID','FieldName','ExceptionSource','Message','IsResolved','Modified'];
  public dataSource = new MatTableDataSource<Integration>();
  public expandedElement: ['EntityType: String','SourceID: string','FieldName: string','ExceptionSource: string','Message: string','IsResolved: boolean','Modified: date'];
  public isChecked: boolean;

  public Value: string;
  public isLoading = true;
  public totalRecords: number;
  public batchSize = 100;
  public pageNum = 1;

  public pageSlice;
  //public dataSource;
  @ViewChild(MatSort,{ static: true }) sort: MatSort;
  @ViewChild(MatPaginator,{ static: true }) paginator: MatPaginator;
  pageEvent;

  control: FormControl = new FormControl('',[
    Validators.required,Validators.maxLength(30)
  ]);

  constructor(private repoService: RepositoryService) { }

  ngOnInit() {

    this.getIntegrationErrors("false");

    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;


    this.dataSource.filterPredicate =
      (data: Integration,filtersJson: string) => {
        const matchFilter = [];
        const filters = JSON.parse(filtersJson);

        filters.forEach(filter => {
          const val = data[filter.id] === null ? '' : data[filter.id];
          matchFilter.push(val.toLowerCase().includes(filter.value.toLowerCase()));
        });
        return matchFilter.every(Boolean);
      };

  }


  changePage(event: any) {

    console.log(event);
    this.isLoading = true;
    const startIndex = event.pageIndex + event.pageSize;
    let endindex = startIndex + event.pageSize;

    this.paginator._intl.getRangeLabel = (page: number,pageSize: number,length: number) => {
      const start = event.pageIndex + event.pageSize;
      const end = (startIndex + event.pageSize) > this.integrate2.TotalCount ? this.integrate2.TotalCount : (startIndex + event.pageSize);
      return `${start} - ${end} of ${this.integrate2.TotalCount}`;
    };

    if (endindex > this.integrate2.TotalCount) {
      endindex = this.integrate2.TotalCount;
    }
    this.pageNum += 1;
    let apiAddress: string = "api/integrations/" + "false" + "/" + this.pageNum + "/" + this.batchSize;
    alert(apiAddress);
    
    this.repoService.getData(apiAddress).subscribe(i => {
      console.log(i);
      this.isLoading = false;
      this.integrate2 = i as IntegrationWrapper;
      this.dataSource.data = this.integrate2.IntegrationLogsBatch;
      this.totalRecords = this.integrate2.TotalCount;
    },error => this.isLoading = false
    );
    this.pageSlice = this.integrate2.IntegrationLogsBatch.slice(startIndex,endindex);
  }

  applyFilter(filterValue: string) {
    const tableFilters = [];
    tableFilters.push({
      id: 'SourceID',value: filterValue
    });

    this.dataSource.filter = JSON.stringify(tableFilters);
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  clearFilters() {
    this.dataSource.filter = '';
    this.Value = '';
  }

  checkValue(isChecked) {
    if (isChecked)
      this.getIntegrationErrors("true");
    else
      this.getIntegrationErrors("false");
  }

  public getIntegrationErrors(v: string) {
   
    let apiAddress: string = "api/integrations/" + v + "/" + this.pageNum + "/" + this.batchSize;
    alert(apiAddress);
    this.repoService.getData(apiAddress).subscribe(i => {
      console.log(i);
      this.isLoading = false;
      this.integrate2 = i as IntegrationWrapper;
      this.dataSource.data = this.integrate2.IntegrationLogsBatch;
      this.totalRecords = this.integrate2.TotalCount;
    },error => this.isLoading = false
    );
  }

}

这是我定义服务功能以获取数据的文件。

service.ts文件

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { EnvironmentUrlService } from './environment-url.service';

@Injectable()
export class RepositoryService {

    constructor(private http: HttpClient,private envUrl: EnvironmentUrlService) { }

  public getData(route: string) {
      return this.http.get(this.createCompleteRoute(route,this.envUrl.APIRoot));
    }

  public create(route: string,body) {
      return this.http.post(this.createCompleteRoute(route,this.envUrl.APIRoot),body,this.generateHeaders());
    }

  public update(route: string,body) {
      return this.http.put(this.createCompleteRoute(route,this.generateHeaders());
    }

  public delete(route: string) {
      return this.http.delete(this.createCompleteRoute(route,this.envUrl.APIRoot));
    }

    private createCompleteRoute(route: string,envAddress: string) {
        return `${envAddress}/${route}`;
    }
}