我用了一个来自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
块。