Angular Http Post Observable 未触发订阅答案

【问题标题】：Angular Http Post Observable not triggering subscribeAngular Http Post Observable 未触发订阅
【发布时间】：2021-12-23 09:32:05
【问题描述】：

我不确定我是否完全理解 Angular 中的 Observables，因为我的 Observable 在调用时不会“触发”或从订阅中获取任何信息。我正在制作一个简单的登录系统，并试图从 Http 帖子中获取成功的消息，我的用户服务中有以下 Observable 功能

addUser(user: User) : Observable<any> {
    var headers = new HttpHeaders()
    headers.append('Content-Type', 'application/json');

    return this.http.post('http://localhost:4000/api/users/add', user,{headers:headers}).pipe(
        map((response: any) => response.json())
    );
}

然后我有一个带有onSubmit 函数的注册组件，它在提交表单时被调用。此函数从服务中调用addUser，将新用户发送到 API 并将其添加到数据库中。

onSubmit(): void {
    this.userService.addUser(this.user)
        .subscribe(res => {
            console.log("Registration successful");
            this.isSuccessful = true;
        },
        err => {
            console.error("Registration failed: " + err);
            this.isSignUpFailed = true;
        }
    );
}

Http post 调用有效，我的 API/Backend 接收数据并成功将用户添加到数据库。我的问题在 Angular 中，Observable 永远不会提供成功的信息或响应，这意味着它永远不会在 onSubmit 函数的订阅调用中执行以下操作

console.log("Registration successful");
this.isSuccessful = true;

我认为这是由于我对 Observables 的误解造成的，但即使在查看了其他几个示例之后，我也不确定如何解决它。

【问题讨论】：

你不需要这个：map((response: any) => response.json() - 除非你有一个非常旧的角度版本..？另外，你不需要标题.

标签： angular typescript observable

【解决方案1】：

只需删除管道，它就可以正常工作，不需要 response.json

检查你的控制台你会发现类似这样的错误

Registration failed: TypeError: response.json is not a function

addUser(user: User): Observable<any> {
    var headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");
 
    return this.http
      .post("https://jsonplaceholder.typicode.com/posts", user, {
        headers: headers
      })
  }

【讨论】：

移除了管道，但仍然没有收到任何消息。有趣的是，如果我在提交后刷新，我确实会收到来自观察者的错误调用。
请检查此link 并将您的工作与它进行比较
看了一下，我的帖子和您提供的文档链接中显示的帖子示例没有太大区别。我看到的唯一没有尝试过的就是在 post 参数中添加 HTTP 选项。我尝试添加观察：'body' 和响应，但仍然一无所获。

【解决方案2】：

原来它与 Angular 无关。愚蠢的错误，问题是我的 API 在调用 post 后没有发回任何信息，它将数据添加到数据库但不返回任何类型的消息，这就是 Observable 没有反应的原因。简单地说，我使用了一个 Observable，它调用了一个操纵数据的函数，即 HTTP 请求，但什么也没返回。我的假设是 HTTP 状态会自动为 Observable 返回一些东西。

【讨论】：