* Project
I am currently working on a project that involves retrieving player data from a json server and displaying it in a standard table format with a paginator.
* Issue
The challenge I'm facing is ensuring that the table data is loaded before the "ngAfterViewInit()" is triggered for the first time. The delay in server response often results in the table being empty when the function is called.
* Attempted Solutions
I have tried populating the table in the "ngAfterViewChecked()" function, which improved the display success rate to about 90%. However, this method is not completely reliable. Additionally, it caused issues with the paginator and sort functionality, which should ideally be initialized in the "ngAfterViewInit()" rather than "ngAfterViewChecked()."
* Code
players: Player[];
ppp:Player[];
copy:Player[];
errMess: string;
displayedColumns = ['id', 'national_id', 'name', 'club_id', 'gov', 'age_level_id', 'weight', 'gender'];
dataSource: MatTableDataSource<Player>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private playrService: PlayerService,
@Inject('BaseURL') public BaseURL
) {
this.playrService.getPlayers().subscribe(response => (this.players = response.data.players), errmess => this.errMess = <any>errmess);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngAfterViewChecked() {
this.dataSource = new MatTableDataSource(this.players);
this.copy = this.players;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
P.s: This table with paginator is built using the Angular Material Component which can be found here
* Desired Outcome
My goal is to defer the population of the table until the data is fully received from the server, while still being able to utilize the paginator and sorting functionality. Ideally, I would like the table to populate and enable the paginator automatically after the data is loaded, without requiring any action from the user.
* Libraries and Versions Used
- Angular V:5.1
- Flex-Layout "angular" V: 2.00 beta 12
- Angular Material V: 5.01