向后端发送数据APIAngular6

Question

我正在尝试使用 angular6 将少量表单详细信息发送到后端 API，但它没有像我预期的那样工作，我该如何添加 Observable，我希望改用 observable承诺。

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 Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError: No provider for Http! Error: StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError: No provider for Http!

Answer 1

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

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

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

PS:

如果您正在使用 HttpClientModule 进行相应的更改
HttpModule 在 v>5

Answer 2

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

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

并且正文对象不是字符串类型，它是对象类型应该是

body = { username, password }

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
  ]

向后端发送数据APIAngular6

Send data to the backend API Angular 6

javascript

observable

rxjs

angular

angular6