代码之家 › 专栏 › 技术社区 › Renaud is Not Bill Gates

subscribe中的代码被多次执行

angular

Renaud is Not Bill Gates · 技术社区 · 6 年前

我在我的项目中使用了ng zorro组件,我想展示一个调用服务来删除条目的模型,这是我如何定义delete confirm对话框的:

  showDeleteConfirm(id: string): void{
    this.modal.confirm({
      nzTitle: 'Ãtes-vous sÃ»r de vouloir supprimer ce enregistrement ?',
      nzOnOk: () => {
          this.service.delete(id).subscribe(data => {
          this.notification.create("success", "Suppression", "L'enregistrement a Ã©tÃ© supprimÃ©e !");
        });
      }
    });
  }

但是我遇到了这样的问题:subscribe函数中的代码被多次执行。

我该怎么解决?

这是我的删除功能:

delete(id: string): any{
  return this.http.delete<Entity>(this._apiURL + id, this.httpOptions).pipe(
    catchError(this.handleError)
  );
}
private handleError(err: HttpErrorResponse) {
  let errorMessage = '';
  if (err.error instanceof ErrorEvent) {
    errorMessage = `An error occurred: ${err.error.message}`;
  } else {
    errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
  }
  return errorMessage;
}

1 回复 | 直到 6 年前

Samuel Ayvazyan 6 年前

如果您想确保subscribe中的代码执行一次,可以使用 take(1) 或 first()

this.service.take(1).subscribe(...);

而且,最好的做法是 takeUntil() 例如在 ngOnDestroy

class myComponent {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(
    private service: Service) {}

  ngOnInit() {
    this.service
      .takeUntil(this.destroyed$)
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前