Angular 6呼叫服务多次而不是一次

Question

我正在使用Angular 6和RxJs6。我在调用服务时遇到问题。我将报告一个案例，但是所有rest-api调用都会发生这种情况。

我有一个项目列表（模板）。用户可以进行编辑，并且有一个保存按钮。问题是，我不知道为什么，即使我只单击一次按钮，也有几次呼叫。我试图设置一个断点，但是它只是一次进入功能，所以我无法弄清楚问题所在。还有一个问题，因为在某些情况下，服务器（例如）创建了2次项目。

这是edit.component.ts中的保存功能：

saveTemplate(){
    const saveTemplate$ = this.templateService.saveTemplate(this.item);
    saveTemplate$.subscribe(
       data => {
          this.toastr.success('Saved');
     });
}

这是template.service.ts中的功能：

saveTemplate(textTemplate Template) 
    return this.http.post<SenecaResponse<{ error: string, response: string }>>(this.saveTemplateUrl, {
        textTemplate: textTemplate
    })
}

当我单击“保存”按钮时，这是rest-api的屏幕：

这是HTTP-INTERCEPTOR：

export class AuthInterceptor implements HttpInterceptor {
constructor(private store: Store<fromApp.AppState>) {
}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.store.select('auth')
        .pipe(take(1),
            switchMap((authState: fromAuth.AuthState) => {
                const headerSettings: { [name: string]: string | string[]; } = {};

                for (const key of req.headers.keys()) {
                    headerSettings[key] = req.headers.getAll(key);
                }
                if (authState.token) {
                    headerSettings['Authorization'] = 'Bearer ' + authState.token;
                }
                headerSettings['Content-Type'] = 'application/json';
                const newHeader = new HttpHeaders(headerSettings);

                const changedReq = req.clone({
                    headers: newHeader
                });

                return next.handle(changedReq);
            }));
}

}