https://i.sstatic.net/G5QPW.png
Data table not loading properly
** JavaScript code **
displayedColumns = ['bloodpressure', 'username', 'weight', 'height'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource = new VisitDataSource(this.dataService);
export interface Visit {
ID: number;
username: string;
height: number;
weight: number;
}
export class VisitDataSource extends DataSource<any> {
constructor(private dataService: DataService) {
super();
}
connect(): Observable<Visit[]> {
return this.dataService.getvisits();
}
disconnect() {}
}
** HTML file ** Using material table with pagination for displaying the data in the table
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="bloodpressure">
<mat-header-cell *matHeaderCellDef> BloodPressure </mat-header-cell>
<mat-cell *ngFor="let visit of visits"> {{ visit.ID }} </mat-cell>
</ng-container>
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef> UserName </mat-header-cell>
<mat-cell *ngFor="let visit of visits"> {{ visit.username }} </mat-cell>
</ng-container>
<ng-container matColumnDef="height">
<mat-header-cell *matHeaderCellDef> Height </mat-header-cell>
<mat-cell *ngFor="let visit of visits"> {{ visit.height }} </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 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
** DATA Service ** Fetching data from the server
@Injectable()
export class DataService {
constructor(private http: Http, private authenticationService: AuthenticationService) {}
getvisits(): Observable<Visit[]> {
const headers = new Headers({'Content-Type': 'application/json'});
const options = new RequestOptions({ headers: headers });
return this.http.get('/getallvisits/', options)
.pipe(map( res => res.json() as Visit[])
);
}
Learned from reading material.angular.io documentation