Question

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

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>

错误：

错误错误：未捕获（在承诺中）：错误：   StaticInjectorError（AppModule）[LogincomponentComponent - ＆gt; HTTP]：
  StaticInjectorError（Platform：core）[LogincomponentComponent - ＆gt; HTTP]：       NullInjectorError：没有Http的提供者！错误：StaticInjectorError（AppModule）[LogincomponentComponent - ＆gt; HTTP]：
  StaticInjectorError（Platform：core）[LogincomponentComponent - ＆gt; HTTP]：       NullInjectorError：没有Http的提供者！

Answer 1

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

如果您的http对象类型为Http import HttpModule 如果您的http对象的类型为HttpClient，请导入HttpClientModule

和body对象不是string类型，它是对象类型它应该是

body = { username, password }

Answer 2

您需要将http模块添加到app.module中，如下所示 -

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

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

PS：

如果您使用HttpClientModule进行相应的更改
HttpModule

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
  ]

将数据发送到后端API Angular 6

3 个答案: