Everything seems to be working fine with the code as I am able to display the data in mat-cards successfully. However, when I try to display it in mat-tables, I encounter index errors. I have made sure to import matTableDataSource, DataSource, CdkTableModule, and MatTableModule as well.
Component.ts
export class DriversComponent {
constructor(private webService : WebService, private route: ActivatedRoute, private auth: AuthService) {}
ngOnInit(){
var name = this.route.snapshot.params['name'];
this.webService.getDrivers(name);
this.webService.getUser().subscribe();
let dataSource = this.webService.getDrivers(name);
let displayedColumns = ['id','name','lastname'];
}
Component.html
<div *ngFor="let driver of webService.drivers | async">
<mat-table #table [dataSource]="dataSource" [@movePanel]='state'>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{driver.employeeId}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{driver.firstName}}</mat-cell>
</ng-container>
<ng-container matColumnDef="lastname">
<mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{driver.lastName}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
webservice.ts
private driverStore = [];
private driverSubjet = new Subject();
drivers = this.driverSubjet.asObservable();
constructor(private http: Http, private sb: MatSnackBar, private auth: AuthService) {
this.getDrivers('');
}
getDrivers(user) {
user = (user) ? '/history/' + user : '';
this.http.get(this.BASE_URL + '/employee' + user).subscribe(response => {
this.driverStore = response.json();
this.driverSubjet.next(this.driverStore);
}, error => {
this.handleError("Unable to get drivers");
});
}