I encountered a situation where I needed to retrieve results from 2 HTTP calls and combine them into an array that would be passed to a class instantiation. Below is the code snippet:
export class VideoListComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: VideoListDataSource;
constructor( private http: HttpProxyService, private videoService: VideoService ) { }
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['Video Name', 'Author', 'Category Name', 'Highest Quality Format', 'Release Date', 'Options'];
ngOnInit() {
let observables = [this.videoService.getInitialData('movie-authors'), this.videoService.getInitialData('movie-categories')];
forkJoin(observables).subscribe(res => {
this.dataSource = new VideoListDataSource(this.paginator, this.sort, res);
console.log(this.dataSource);
})
}
}
While this.dataSource appears as expected in the console log, it is being flagged as undefined when used in the HTML template.
Any suggestions? Is there something crucial that I may have overlooked?
Updated with HTML markup
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>