在 Angular 7 中，为什么 HttpClient.post 即使只订阅了一次也被执行了两次？

Question

只有一次我从 HttpClient.post 订阅了这个 observable。但是，post 请求被执行了两次，因此添加了相同的记录两次。请注意，所有调试日志语句都显示，只有来自订阅函数的成功响应被打印（并执行）两次。

  addTemplate(template) {
      console.log('In addTemplate');
      let authHeaders = new HttpHeaders();
      authHeaders = authHeaders.set('Authorization', 'Bearer ' + localStorage.getItem('id_token'));
      authHeaders = authHeaders.set('Content-Type', 'application/json');
      const httpOptions = {
        headers: authHeaders,
        observe: 'body' as 'body',
        responseType: 'json' as 'json'
      };
      console.log('^^^^^ addTemplate  Service Header  = ', httpOptions);

      this.httpClient.post<any>(this.constants.URL + 'addTemplate', JSON.stringify(template),
        {headers: authHeaders}).pipe().subscribe(
        (response) => {  console.log ('Added Template Successfully -->', response)},
        (error) => { console.error('Got an Error while adding Template ->', error) }
      );
   }

从这里调用上面的函数：

 saveTemplate(){
      const saveTemplate : ITemplate = Object.assign({}, this.templateForm.value);
      console.log('Adding new Template with name -->', saveTemplate.name);
      this.templateService.addTemplate(saveTemplate);
  }

这是浏览器控制台的图像：

这是浏览器网络选项卡的图像：

如您所见，HttpClient.post 对 addTemplate REST API 的调用被调用了两次。即使 post 调用仅被订阅一次并且没有其他地方被调用。通话记录

  console.log('^^^^^ addTemplate  Service Header  = ', httpOptions);

在service中的addTemplate函数执行了一次但是log(response)=>{console.log('Added Template Successfully -->',response)},执行了两次。

我确实尝试更改对 httpClient.post 的调用以使用 share() 和 publishLast().refCount() 但没有任何效果。可能是我做的不对。

将 Angular 7.2 与 rxjs 6.5.2 和 rxjs/compat 结合使用（是的，我确实有一些遗留代码需要升级到最新版本）

Answer 1

这是我的错误。表单正在调用 saveTemplate() 以及按钮...所以它被调用了两次。

<form [formGroup]="templateForm" autocomplete="off" novalidate (ngSubmit)="saveTemplate()">

按钮：

          <button mat-button mat-raised-button color="primary"
              type="submit" (click)="saveTemplate()" [disabled]="templateForm.pristine">Save

感谢@CaptainFindus、@Alexander Staroselsky 和大家的帮助

在 Angular 7 中，为什么 HttpClient.post 即使只订阅了一次也被执行了两次？

In Angular 7, why HttpClient.post is getting executed twice even if subscribed only once?

rxjs

angular

angular-httpclient

angular7