Javascript 将数据发送到后端API 6

我试图使用angular6将一些表单细节发送到后端API，但它没有像我预期的那样工作，我如何向其添加可观察性，我希望使用可观察性而不是承诺

login.component.html

loginUser(e){

    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    console.log(username,password);

      this.user.setUserLoggedIn()
      var body = "username=" + username + "password=" + password;
      this.http.post("http://localhost:8080/user/all", body).subscribe((data) => {});
       this.router.navigate(['fullpage'])

    return false;
  }

<form id="loginForm" novalidate="novalidate" (submit)="loginUser($event)">
                                    <div class="form-group">
                                        <label for="username" class="control-label">Username</label>
                                        <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="example@gmail.com">
                                        <span class="help-block"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="control-label">Password</label>
                                        <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password" placeholder="******">
                                        <span class="help-block"></span>
                                    </div>
                                    <div id="loginErrorMsg" class="alert alert-error hide">Wrong username or password</div>
                                    <div class="checkbox">
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block">Login</button>

                                </form>

login.component.html

loginUser(e){

    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    console.log(username,password);

      this.user.setUserLoggedIn()
      var body = "username=" + username + "password=" + password;
      this.http.post("http://localhost:8080/user/all", body).subscribe((data) => {});
       this.router.navigate(['fullpage'])

    return false;
  }

<form id="loginForm" novalidate="novalidate" (submit)="loginUser($event)">
                                    <div class="form-group">
                                        <label for="username" class="control-label">Username</label>
                                        <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="example@gmail.com">
                                        <span class="help-block"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="control-label">Password</label>
                                        <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password" placeholder="******">
                                        <span class="help-block"></span>
                                    </div>
                                    <div id="loginErrorMsg" class="alert alert-error hide">Wrong username or password</div>
                                    <div class="checkbox">
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block">Login</button>

                                </form>

用户名
暗语
错误的用户名或密码
登录

错误：

错误：未捕获（承诺中）：错误： StaticInjectorError（AppModule）[LogincomponentComponent->Http]：
StaticInjectorError（平台：核心）[LogincomponentComponent->Http]： NullInjectorError:没有Http的提供程序！错误：StaticInjectorError（AppModule）[LogincomponentComponent->Http]：
StaticInjectorError（平台：核心）[LogincomponentComponent->Http]： NullInjectorError:没有Http的提供程序

---

您需要像这样将

http

模块添加到

app.module

中-

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [],
  imports: [HttpModule]
...

附言：

• 如果您使用的是

  HttpClientModule

  ，请进行相应的更改

• HttpModule

  在v>5中不推荐使用

---

您应该在app.module文件中导入

HttpModule

或

HttpClientModule

并将其添加到导入数组中

如果http对象的类型为http导入

HttpModule

如果http对象的类型为HttpClient导入

HttpClientModule

body对象不是string类型，而是object类型 应该是

body = { username, password }

---

要在应用程序中使用Http，您需要将HttpModule添加到app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule
  ]

---

现在我得到了

错误响应{{U body:“{“timestamp”：1529392191129，“status”：415，“ERROR”：“U…harset=UTF-8'不受支持”，“path”：“/user/save”}，status:415，ok:false，statusText:“ok”，headers:headers，}

这个错误来自后端服务器httpmodule在angular6中被弃用，不建议使用不推荐使用的modules@bambam您能告诉我问题中提到的OP使用的是

httpClient

？另外，我在回答中也提到了

httpClientModule

，仅供参考

httpModule

对于某些版本仍然处于工作状态，那么为什么DOWNVOTE？？httpModule在angular6中不推荐使用不推荐使用的模块现在我得到了错误响应{“timestamp”：1529392191129，“status”：415，“ERROR”：U…harset=UTF-8'不受支持，“/user/save”}，状态：415，ok:false，statusText:“ok”，headers:headers，…}HttpModule在angular6中已弃用，不建议使用弃用的模块我将其添加到现在我得到错误响应{“timestamp”：1529392191129，“status”：415，错误：“U…harset=UTF-8'不受支持”，“路径”：/user/save“}”，status:415，ok:false，statusText:“ok”，headers:headers，…}@bambam我不建议使用HttpModule，如果已经导入的http对象来自HttpModule@SibaBoba这可能是一个问题，为什么会投反对票？