When I select the select option to make an API call for a new datasource, my table appears before fetching data and it remains empty. Additionally, if I choose another select option, it displays the previous data from the previous selection.
I have attempted implementing triggers, awaits, and promises to resolve this issue.
ngOnInit() {
getAllRoutes();
this.currentRouteControl.valueChanges
.pipe(takeUntil(this._unsubscribe))
.subscribe((val: Route) => {
this.commonCatalogueService.getRouteScheduleByRouteId(val.id)
.subscribe((data:any) => this.dataSource = data)});
}
I expect the table to render ONLY after the data has been successfully fetched. UPD: The items in the select list will be fetched in ngOnInit and added to an array. This array will then be populated into the select options using ngFor directive
<select class="m-r-20" [formControl]="currentRouteControl">
<option *ngFor="let route of (routes$ | async)" [ngValue]="route.route">{{
route.route.number
}}</option>
</select>
private routesSubject: BehaviorSubject<RouteWrapper[]> = new BehaviorSubject(null);
routes$ = this.routesSubject.asObservable();
getAllRoutes() {
this.isLoadingResults = true;
this.commonCatalogueService
.getRouteWrappers()
.pipe(takeUntil(this._unsubscribe))
.subscribe(val => {
this.routesSubject.next(val);
this.isLoadingResults = false;
});
}