Upon examining the code provided, it is evident that the UI does not reflect the updated value even though the field is set correctly.
I have attempted two different approaches but have not explored the change detection approach as I believe the current code should suffice.
In my service, I monitor the route end event because there are certain changes needed in the service based on whether a parameter exists in the route, such as '/page/:id'.
In one scenario, the URL could be /page and in another /page/12. Therefore, depending on this factor, I need to retrieve values from two different services – using SERVICE1 if the ID does not exist and SERVICE2 otherwise.
I have a subscribe function that returns a value from another subscribe. To achieve this, I rely on emitting the value from the inner subscribe, which works fine according to the examples below. However, the issue lies in the fact that the UI fails to render these values.
MAIN SERVICE
Note: The complete class has been omitted for brevity, only showcasing the relevant method:
get getCourse(): Observable<CoursesDTO> {
let subject = new Subject<CoursesDTO>();
this.router.events.pipe(filter(e => e instanceof NavigationEnd))
.subscribe(x => {
let course: CoursesDTO = {
courseName: '',
courseId: ''
};
const route = this.router.routerState.snapshot.root;
let courseId: string = '';
if (route.children.length >= 1) {
const obj = route.children[route.children.length - 1];
const value = (obj.params as any).value;
if (!_.isEmpty(value)) {
this.courseWorkflowProxy.interact(value.courseId, 'CourseMaterial', null)
.subscribe((b: InteractionResponseDTO) => {
const x: CourseDTO = <any>b.workflowResult;
course = {
courseName: x.courseName,
courseId: x.courseId
};
subject.next(course);
subject.complete();
});
}
}
this.coursesProxy
.getCourseInfo()
.subscribe(b => {
course = {
courseName: b.courseName,
courseId: b.courseid
};
subject.next(course);
subject.complete();
});
});
return subject;
}
Please note, the code has been altered for demonstration purposes rather than an actual use case.
The component WatchBlock.ts demonstrates one of the proposed fixes using ngZone:
this.whatBlockService.getCourse.subscribe((r: CourseDTO) => {
this._ngZone.run(() => {
this.title = r.courseName;
this.id = r.courseId;
console.dir({ title: this.title, id: this.id });
});
});
Although the above code successfully retrieves the desired values, they do not reflect in the rendered HTML.
The HTML section looks like:
<div fxLayout="row" fxLayoutAlign="start center">
<div class="ml-16">
<label class="identi">{{id}}</label>
</div>
</div>
<div class="px-8 px-mat-16">
<span class="mat-title">{{title}}</span>
</div>
I also attempted using the BehaviorSubject approach without success.
I decided against utilizing the change detector route as I trust that ngZone should handle the change detection automatically given its functionality.
I am at a loss with this issue and seek guidance from experienced individuals in resolving it.