英文:
How to update existing Observable in async pipe
问题
I understand that you'd like the code portions to be translated. Here's the translation:
我有一个Observable，通过async管道进行订阅。
<ng-container *ngIf="invitations$ | async as invitations">
这个Observable在ngOnInit中设置：
this.invitations$ = this.getInvitations();
getInvitations是一个执行http调用并返回Observable<Invitation[]>的私有函数。
private getInvitations(): Observable<Invitation[]> {
return this.invitationService.getInvitations();
}
现在，在不同的函数中，我想在http调用完成后更新这个Observable。我想要发送一个提醒（通过模板中的按钮触发），如果成功，我想要更新邀请。
sendReminder() {
this.invitationService.postReminderEmail()
.subscribe();
}
所以我有这一行：
this.invitations$ = this.getInvitations();
但是我应该把它放在哪里？我知道async管道会处理取消订阅前一个值并在我这样做时重新订阅，所以不会有内存泄漏。
我应该把它放在管道中吗？
sendReminder() {
this.invitationService.postReminderEmail().pipe(
mergeMap(() => this.invitations$ = this.getInvitations())
.subscribe();
}
我认为这一行是一个同步操作，而且我在mergeMap中并没有真正返回任何东西（尽管编译器接受这个），所以这似乎不对。
我可以用tap替换mergeMap，但我对此也不太确定。
把它放在subscribe中感觉像是一个间接嵌套的subscribe（因为它会通过async管道触发一个新的subscribe），这不是我想要的。
我是否可以创建一个Subject，invitations$可以监听它，然后在这里使用next()来触发它？我不喜欢的是，我必须在next中放一个空数组或其他东西来触发它。
this.invitationsSubject.pipe(
mergeMap(() => this.getInvitations()),
takeUntil(this.destroyed)
).subscribe();
this.invitations$ = this.invitationsSubject.asObservable();
触发：
this.invitationsSubject.next([])
这也似乎不是一个好的解决方案（而且更冗长）。
什么是正确的方法？
Please note that translating code can sometimes result in a loss of clarity or context, so it's important to review the translated code carefully to ensure it meets your requirements.
英文:
I have an Observable that is subscribed to via the async-pipe.
<ng-container *ngIf="invitations$ | async as invitations">
This Observable is set in the ngOnInit:
this.invitations$ = this.getInvitations();
getInvitations is a private function that does the http-call and returns an Observable<Invitation[]>.
private getInvitations(): Observable<Invitation[]> {
return this.invitationService.getInvitations();
}
Now, in a different function, I want to update this Observable, after a http-call has been completed. I want to send a reminder (triggered via a button in the template), and if it succeeds, I want to update the invitations.
sendReminder() {
this.invitationService.postReminderEmail()
.subscribe();
}
So I have the line:
this.invitations$ = this.getInvitations();
But where do I put it? I know that the async-pipe will handle the unsubscription from the previous value and will resubscribe when I do this, so no memory leak.
Do I put it in the pipe?
sendReminder() {
this.invitationService.postReminderEmail().pipe(
mergeMap(() => this.invitations$ = this.getInvitations())
.subscribe();
}
I think this line is a synchronous action, and I'm not really returning anything in the mergeMap (even though the compiler accepts this), so this does not seem to be right.
I can change the mergeMap with tap, but I'm not sure about that either.
Putting it in the subscribe feels like an indirect nested subscribe (because it will trigger a new subscribe via the async pipe), which I don't want.
Do I make a Subject that the invitations$ can listen to, and I do a next() here, to trigger it? What I don't like about that, is that I have to put an empty array or something in the next to trigger it.
this.invitationsSubject.pipe(
mergeMap(() => this.getInvitations()),
takeUntil(this.destroyed)
).subscribe();
this.invitations$ = this.invitationsSubject.asObservable();
Trigger:
this.invitationsSubject.next([])
This also does not seem to be a good solution (and it is more verbose).
What is the right approach?
答案1
得分: 1
如果我理解您的意思正确，您只是想在发送提醒时更新 invitations$ 吗？
您可以直接更新 invitations$ 而不是创建一个新的可观察对象，Angular 会自动取消订阅先前的可观察对象。
sendReminder(){
this.invitations$ = this.invitationService.postReminderEmail().pipe(switchMap(() => this.getInvitations()));
}
英文:
If I understand you correctly, you simply want to update the invitations$ when you send a reminder?
You could just update the invitations$ instead of creating a new observable, angular will unsubscribe from the previous observable.
sendReminder(){
this.invitations$ = this.invitationService.postReminderEmail().pipe(switchMap(() => this.getInvitations()));
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论