I am facing a challenge in my Angular6 material-data-table application where I need to display and manipulate a complex JSON structure received from a REST endpoint. While the data is successfully displayed, I am struggling to implement pagination and sorting features.
Despite trying various solutions found on Stack Overflow, I have been unsuccessful in resolving the issue. It's possible that the problem lies in how I am accessing the REST data (even though I can access it in the constructor) but I haven't been able to pinpoint the exact issue. No error messages are being displayed, and all imports appear to be correct.
file: employee-list.ts
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource, MatPaginator } from '@angular/material';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Entry } from '../../interfaces/entry';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
typesafeEntries: Entry[];
listData: MatTableDataSource<Entry>;
displayedColumns: string[] = ['searched', 'german', 'dialectEntry', 'partOfSpeech', 'linguisticUsage', 'synonyms', 'actions'];
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private userService: UserService) {
this.userService.getCompleteSearchResults("SomeLanguageData1", "SomeLanguageData2", "wordToLookFor")
.subscribe((resp: Entry[]) => {;
this.typesafeEntries = resp;
this.listData = new MatTableDataSource<Entry>(this.typesafeEntries);
this.listData.sort = this.sort;
});
}
ngOnInit() { }
}
[
{
"dialectA": {
"dialectId": "5d1220343269a28de043eda9",
"dialectEntry": "House",
...
...
// end of first entry
{...}, {...} ]
Expected result: when clicking on sort, the content of this column should be sorted. the same with pagination.
here a screenshot: screenshot from project