将数据发送到后端 API Angular 6 [重复]

Question

我正在尝试使用 angular6 将一些表单详细信息发送到后端 API，但它没有按我预期的那样工作，我该如何添加 Observable，我希望使用 observable 而不是 Promise。

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;
  }

login.component.html

<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>

错误：

ERROR 错误：未捕获（承诺）：错误： StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError：没有 Http 提供者！错误：StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError: 没有 Http 提供者！

Answer 1

您应该在 app.module 文件中导入 HttpModule 或 HttpClientModule 并将其添加到导入数组中

如果你的 http 对象是 Http 类型的 import HttpModule 如果你的 http 对象是 HttpClient 类型的 import HttpClientModule

并且body对象不是字符串类型它是对象类型 应该是

body = { username, password }

Answer 2

您需要像这样将http 模块添加到您的app.module -

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

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

PS：

• 如果您使用的是HttpClientModule，请进行相应的更改
• HttpModule 在 v>5
中已弃用

Answer 3

为了在您的应用中使用 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
  ]