I've been struggling to incorporate this Angular Material table example into my project.
I can see the data from my REST endpoint in the console output, so I'm not sure what I'm doing wrong.
I suspect that maybe the data isn't fully loaded when the table is rendered. Any guidance would be greatly appreciated, thank you!
lap.component.ts
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {Router} from '@angular/router';
import {LapService} from '../shared/services/lap.service';
import {Lap} from '../shared/model/lap.model';
@Component({
selector: 'app-lap',
templateUrl: './lap.component.html',
styleUrls: ['./lap.component.css']
})
export class LapComponent implements OnInit {
displayedColumns = ['id', 'year', 'lap', 'shortcut flag', 'start place', 'destination place', 'length', 'height difference'];
dataSource: MatTableDataSource<Lap>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(public rest: LapService, private router: Router) {
}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.getLaps());
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
getLaps() {
this.rest.getLaps().subscribe((data: {}) => {
console.log(data);
console.log('Laps');
return data;
});
}
}
lap.component.html
...