Angular 6-分页不适用于数据表

Question

我正在从服务器请求数据并能够成功地将其显示在数据表中。由于某种原因，在分页功能停止工作之后，我不得不在 html 中使用“table mat-table”而不是“mat-table”。当我使用“mat-table”元素时，它之前工作正常。 此外，使用“table”标签的原因是动态隐藏没有数据的列，这是我之前无法做到的。如果有解决方法，请告诉我。 提前致谢！

public array: any = [];//declaring an empty array

import { MatTableDataSource, MatSlideToggleChange } from '@angular/material';
import {MatPaginator,  MatSort} from '@angular/material';
constructor(private router: Router, private Auth: AuthService ) { }

  dataSource = new MatTableDataSource(this.data);

  displayedColumns: string[] = this.array;//passing array to displayedColumns

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
 }

getRecords(event){
  event.preventDefault();
  const target = event.target;



this.someService.getDetails()
 .subscribe(
   data =>{

     this.Response=data.data,
     this.dataSource.data = this.Response,
     console.log("fetched data :",this.Response);
     for (var item of Object.keys(this.Response[0])){
      this.array.push(item);// PUSHING THE FETCHED COLUMNS TO ARRAY
    }
   }
 );this.resetArray();

 }

<div class="mat-elevation-z8">
    <mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
 <mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="userId">
     <mat-header-cell *matHeaderCellDef>User Id</mat-header-cell>
     <mat-cell *matCellDef= "let element">{{element.userId}}</mat-cell>
   </ng-container>
   <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
      <mat-cell *matCellDef= "let element">{{element.title}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
        <mat-cell *matCellDef= "let element">{{element.id}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="completed">
          <mat-header-cell *matHeaderCellDef>Completed</mat-header-cell>
          <mat-cell *matCellDef= "let element">{{element.completed}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="blank">
            <mat-header-cell *matHeaderCellDef>Blank</mat-header-cell>
            <mat-cell *matCellDef= "let element"></mat-cell>
          </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns" style="background-color:#bcd8f1;border-color: red;"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 </mat-table>

</div>

数据表显示带有动态列的记录，分页工作正常，但不是只显示新数据，而是数据表列附加了先前加载的列，然后显示。

Answer 1

来自您的stackblizt。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  /*
    These variables are not needed
  */
  // public data: any = [];  
  // public array: any = [];

  dataSource = new MatTableDataSource([]);
  displayedColumns: string[] = [];
  // View child require 2 PARAMS
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(private service: Service) { }


  ngOnInit() { 
    this.loadData();
  }

  showTable() {
    // I dont know what you really want to do here.
    if(this.dataSource.data.length === 0){
      this.loadData();
    }
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  loadData() {
    this.service.getAuthRecords1().subscribe(
      data => {
          this.dataSource.data = data as any,
          console.log("dummy data :", data);
        if (this.displayedColumns.length === 0){
          this.displayedColumns = Object.keys(data[0]);
        }
      });
  }
}