只需要观察者提供单个真值或假值



我用了一个来自p-toast的消息盒。当我单击删除时,我想获取是或否值,然后它将点击 api 以删除该项目。不,它不会做任何事情。这个东西正在工作,但是当我单击第 1 项时,我单击"否",然后单击第 2 项,然后在消息框中单击"是",之后它删除了第 1 项和第 2 项。我想删除当前项目。

messagebox.service.ts:

public messageSource = new BehaviorSubject(false);   currentMessage =
this.messageSource.asObservable();
public _msgBoxSubject: EventEmitter<boolean> = new
EventEmitter<boolean>();   public confirmResponse: boolean = false;  
response: boolean = false;
show() {
this.messageSource.next(false);
this.response = true;
this._msgBoxSubject.emit(this.response);   }
onYes(value) {
this.messageSource.next(value);
this.confirmResponse = value;   }
onNo(value1) {
this.confirmResponse = value1;   }
hide() {
this.response = false;
this._msgBoxSubject.emit(this.response);   }
getMsgBoxEmitter() {
return this._msgBoxSubject;   }

messagebox.component.ts:

ngOnInit() {
this._msgBoxService.getMsgBoxEmitter().subscribe((value: boolean) => {
this.messageService.clear();
this.messageService.add({ key: 'c', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' });
});    }
onConfirm() {
this.messageService.clear('c');
this._msgBoxService.onYes(true);   }
onReject() {
this.messageService.clear('c');   }

emailmaster.component.ts: (我在单击删除按钮时调用此函数(

deleteEmail(ID: Email) {
this._msgBoxService.show();
this._msgBoxService.currentMessage.subscribe(response1 => {
if (response1 === true) {
this._masterservice.deleteEmail(ID).subscribe(data => {
this._toasterService.showMessage('Email deleted successfully', 'Success Message', 'success');
if (data) {
this.GetEmails();
}
});
}
});
}

我只想在从消息框中单击时删除当前项目。

因此,正如另一个答案已经建议的那样,我认为问题是您在当前消息的 deleteEmail 函数中的订阅永远不会取消订阅,因此它从之前的尝试中继续存在

deleteEmail(ID: Email) {
this._msgBoxService.show();
this._msgBoxService.currentMessage.subscribe(response1 => {
if (response1 === true) {
this._masterservice.deleteEmail(ID).subscribe(data => {
this._toasterService.showMessage('Email deleted successfully', 'Success Message', 'success');
if (data) {
this.GetEmails();
}
});
}
});
}

电流示例。

您调用删除电子邮件会弹出一个确认,您的代码订阅答案,寻找一个 true。

您单击"否"(假(,确认消失,但订阅仍在侦听。

您下一次删除电子邮件的调用会弹出确认,您的代码再次订阅答案,现在有两个订阅者在收听。

单击"是"(true(,两个订阅都会跳入操作,为第一个和第二个项目发送删除请求。


另一张海报的想法是正确的,但他们的方法行不通,因为您的服务仅在某些事情为真时才发出。 它从不说什么时候是假的。 因此,试图接受(1(意味着它只会坐在那里等到某些东西说是。

因此,我们需要进行一些小的更改才能使其正常工作。

步骤 1 使用方法(1(

this._msgBoxService.currentMessage
.pipe(take(1)) // this completes the observable after hearing 1 value from it
.subscribe(response1 => {

步骤 2 在拒绝时做某事

onReject() {
this.messageService.clear('c');   
this._msgBoxService.onNo(false); // send the onNo when rejected   

步骤 3 调用 onNo 时发出值

onNo(value1) {
this.messageSource.next(value1); // when onNo called, emit the value so old subscribers can complete
this.confirmResponse = value1;   }

还建议删除显示时发出假值,因为这可能会混淆事情

show() {
// this.messageSource.next(false); // remove this line to avoid hearing it's emit 
this.response = true;

您的deleteEmail方法不会取消订阅currentMessage可观察。尝试如下操作:

deleteEmail(ID: Email) {
this._msgBoxService.show();
this._msgBoxService.currentMessage.pipe(
filter(response1 => response1), // only allows true values through
take(1), // takes one emission per subscription and then completes
mergeMap(() => this._masterservice.deleteEmail(ID)), // mergeMap can be used safely because you're only getting one emission
tap(() => this._toasterService.showMessage('Email deleted successfully', 'Success Message', 'success')),
filter(data => !!data), // only emissions where data exists here will continue
tap(() => this.GetEmails())
).subscribe();
}

我还建议添加错误处理,因为如果这里有任何失败,您不会发现它。例如,您可以添加catchError块。

最新更新