大 JSON 文件的 Angular 材料表中的分页、排序、过滤器失败

Question

我正在尝试通过快速服务器将包含超过 50K 条目的 JSON 发送到 Angular。在部署中，我可以看到 Angular Material 表格式的所有条目。但是表格的分页、排序和过滤功能根本不起作用。

这是ts文件

import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { Component, ViewChild } from '@angular/core';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { ViewDataService } from './modules/view-data.service';
import { ThrowStmt } from '@angular/compiler';
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs';

export interface DataEntries {

  key: string;

  value: String;

}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
  

export class AppComponent {
  title = 'TD';

  dataSource: any;  //MatTableDataSource<Student>;

  

  displayedColumns: string[] = ['key', 'value'];
  //columns: string[] = ['id','name','email','gender']

  public orderByKey(a: any, b: any) {
    return a.key;
  }
  private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  }
  //@ViewChild(MatSort, { static: false }) sort: MatSort;
  //@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  dataEntries: DataEntries[] = []
  
  constructor(private viewdata: ViewDataService) {
   
  }


  ngOnInit(): void {
    this.viewdata.getData().then(response => {
      this.dataEntries = response.data;
      console.log(this.dataEntries);
      this.dataSource = new MatTableDataSource(this.dataEntries);
      console.log(this.dataSource);
      this.dataSource = this.dataSource.filteredData;
      this.dataSource.sort = this.sort;
      setTimeout(() => this.dataSource.paginator = this.paginator);
  
    })
 

    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }
}

这是模板

<h1>Placeholder Table</h1>


<mat-form-field>
  <mat-label>Filter</mat-label>
      <input matInput formControlName="formControlName"
             type="text"
             placeholder="Search" (keyup)="applyFilter($event)">
</mat-form-field>

<mat-table [dataSource]="dataSource | keyvalue:orderByKey" class="mat-elevation-z4" matSort>
  <ng-container matColumnDef="key">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Key
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.key}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="value">
    <mat-header-cell *matHeaderCellDef mat-sort-header> value</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
  </ng-container>
  
  
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="dataEntries.length"
              [pageSize]="100"
              [pageSizeOptions]="[2, 5, 25, 100]">
</mat-paginator>

<router-outlet></router-outlet>

这里是快递文件：

var express = require('express');
var router = express.Router();
const jason = require('../public/jsons/en-GB.json');
router.get('/', function(req, res, next) {
  res.json(JSON.parse(JSON.stringify(jason)));
  console.log('Test');
  
});

module.exports = router;

请告诉我他们失败的原因

Answer 1

在你的app.component.ts

async ngOnInit(): void {
   const response = await this.viewdata.getData();
      this.dataEntries = response.data;
      console.log(this.dataEntries);
      this.dataSource = new MatTableDataSource(this.dataEntries);
      console.log(this.dataSource);
      this.dataSource = await this.dataSource.filteredData;
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator
    }
 
    
  }

在你的http-service

getData(){
 return http.get('/').toPromise();
}