I've been delving into learning angular2 and recently built a test application with an odata webapi backend. In this app, there's a view that fetches an array of items which I aim to display.
To retrieve data from the frontend, I opted for breezejs library due to its time-saving qualities and compatibility with an odata backend.
This is the structure of my call tree and application:
The process begins with a service function being called from the view to initiate item fetching (noteworthy is that I return an es-6 promise in every call):
this._scrumModuleService.fetchActiveSessions().then((sessions: ScrumSession[]) => {
// The inclusion of zone.run is necessary for updating the view.
this._zone.run(() => {
this.sessions = sessions;
});
}).catch((error: any) => {
debugger;
});
Subsequently, the view navigates to the service which then accesses the repository:
public fetchActiveSessions(): Promise<ScrumSession[]> {
return this._scrumSessionRepository.fetchActiveSessions();
}
The fetch function within the repository:
public fetchActiveSessions(): Promise<ScrumSession[]> {
return this._dataContext.fetch(new breeze.EntityQuery().from("ScrumSessions").expand(['creator', 'scrumRoom','productOwner', 'users']));
}
Lastly, the repository leads to the (generic) datacontext which executes the query using the breeze entitymanager:
public fetch(query: breeze.EntityQuery, isRetry: boolean = false): Promise<any> {
return new Promise((resolve, reject) => {
this.entityManager.executeQuery(query).then((result: breeze.QueryResult): void => {
// Data has been fetched, so resolve the results
resolve(result.results);
});
});
}
In the view, it's apparent that I have to utilize the run function from NgZone to update automatically as expected in angular2. Despite exploring similar queries without finding a solution, I even implemented the angular2-polyfills script as suggested, yielding no change.
What am I overlooking or what further implementation is required for automatic view updates without calling zone.run?