Having an issue with the ReplaySubject in my code. It seems that after updating an Array, the new values are not reflecting on the UI. I can only see the old values unless I reload the page. I have tried using ngZone but it didn't help.
The code is divided into a service and a component. Below is the code for the Service:
private userData = new ReplaySubject<any>();
public user(): Observable<User> {
return this.userData.asObservable();
}
public getUserData(userId) {
this.http.get(`${this.baseUrl}/user-profile/${userId}`).subscribe(res => this.userData.next(res));
}
public updateUser(userId, user: User) {
const api = `${this.baseUrl}/user/${userId}`
this.http.put<any>(api, user).pipe(take(1)).subscribe((res) => {
this.userData.next(res);
})
}
And here is the code for the Component:
public user$: Observable<User>;
currentUser: User;
this.userService.getUserData(this.userID);
this.user$ = this.userService.user();
this.cd.detectChanges();
this.ngZone.run(() => {
this.user$.subscribe((res: User) => {
console.log(res);
this.currentUser = res;
this.model = res?.userCV[0];
});
});
Lastly, here is the HTML:
<div class="Title-title-titleWrapper first-template-titleWrapper">
<h4 *ngIf="model?.hideName">{{currentUser?.firstName}} {{currentUser?.lastName}}</h4>
<h5>{{model?.newJobTitle}}</h5>
<div [innerHTML]="model?.description | noSanitize"></div>
</div>