![](/img/trans.png)
[英]How to implement (sort, pagination) for Angular Material table which retrieves data through Rest API (JSON)?
[英]Pagination, Sort, Filter fails in Angular Material Table for big JSON file
我正在嘗試通過快遞服務器將超過 50K 條目的 JSON 發送到 Angular。 在部署中,我可以看到格式為 Angular 材料表的所有條目。 但是,表格的分頁、排序和過濾功能根本不起作用。
這是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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.