Issue
I would really appreciate help here i am not sure how to solve this issue.
I have Following Code For Changing Read status of messages. but when i change status from message component the count that i use in navbar is not updating same goes for Delete function also.
i am Calling this updateStatus method on Button Click. it will update read Booleanfield in database. messageComponent.ts
updateStatus(messageId, readStatus){
this.service.update(messageId, readStatus).subscribe(res=> {
let updateStatus = this.messages.find(m => m.uid == res.data.uid);
let index = this.messages.indexOf(updateStatus);
this.messages[index].read = readStatus;
});
}
messageService.ts
getAllMessages() {
const options = {url : url, headers: headers}
const response = Http.request({...options, method: GET})
return from(response).pipe(shareReplay(1))
}
updateMessage(messageId, readStatus){
const options = {url : url, headers: headers, , data: {read: readStatus}}
const response = Http.request({...options, method: PATCH})
return from(response).pipe(shareReplay(1))
}
I send messagecounter as Input for menuitem component. as i have build custom scrollable navigationbar so i need to separate all part of navbar in different component.
navBarComponent.ts
constructor(private messageService:MessageService) {
this.messageService.getAllMessages().subscribe(message => {
this.messageCounter = message.data.results.filter(msg => msg.read === false).length;
});
}
navbarComponet.html
<ul>
<li style="width: 100%;">
<app-navigation-menu-item [icon]="icons.notification" [url]="'/messages'" [countBadge]="messageCounter">
</app-navigation-menu-item>
</li>
</ul>
NavigationMenuitem.html
<span matBadgeColor="warn" matBadgeSize="small" matBadgePosition="above before"
[matBadge]="countBadge" [matBadgeHidden]="countBadge ==''"></span>
Thank you in Advance.
Solution
First of all, you should know why your approach does not work:
In your navBarComponent
you are subscribing to this.messageService.getAllMessages()
, which will be called exactly one time. This is an HTTP request, which is happening independently from other HTTP calls. If some other component is calling updateMessage
this has nothing to do with the initial subscription from navBarComponent
.
Suggestion: You should move your this.messages
object to your service should define it as an BehaviorSubject (which will initially get the value of getAllMessages()
. Each time you call your update
function you should also 'next' the values to your subject. Now you can subscribe in both components to this subject and derive your actual state in whatever logic you want to have.
If you provide a Stackblitz example, I can also fork the repo and adjust the code accordingly (if needed).
Note: Is there a particular reason you seem to not be using Angular HTTP Client? You wouldn't have to transform a promise to an observable this way, since it is returning an observable right away.
Answered By - Fabian Strathaus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.