json - 大 JSON 文件的 Angular 材料表中的分页、排序、过滤器失败
问题描述
我正在尝试通过快速服务器将超过 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;
请让我知道他们为什么失败
解决方案
在你的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();
}
推荐阅读
- xcode - 自动建议在 Xcode 9.4.1 中不起作用
- php - 发布编辑表单数据并使用 angularjs 在控制器中获取它
- azure-devops - VSTS 负载测试:随着时间的推移,许多用户的单个请求
- java - 如何处理@ViewScoped 页面中的“缓存”实例?
- javascript - 如何使用 jQuery/javascript 打印包含数据的 div
- angular - Angular4:由于 mousedown 事件触发了 dragstart 事件
- java - Axon 消息接收但事件处理程序未调用
- rest - Owasp Zap 测试 rest api
- django - 在 Django 中使用 Postman 进行分页
- python - 从 csv 仅将一列转换为 dict