Question

我想在角度4中做一个http发布请求，它在Postman中工作得很好这里是例子：

接头

体：

以下是代码：

＆＃13;

resetPasswordCall(input, jwt) {
    return this.httpClient.post(AppSettings.API_CACHE + 'scoraChangePassword/' + jwt, input, {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
    }).map(res => res);
  }

＆＃13;

控制台中的参数：

我在浏览器中没有收到任何回复，但邮递员立即给出回复。

我已经从这里修改了我的代码：https://github.com/angular/angular/issues/19535

Answer 1

在app.service.ts文件中

import { Injectable } from '@angular/core';
import { Http,Response,Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class UserActionsService {
  user_action_url: string;
  data : any={'success':'',error:''};
  constructor(private _http: Http) { }

  post_method() {
    var  headers = new Headers;
    headers.append('Content-Type','application/json; charset=utf-8');
      return this._http.post(this.user_action_url,this.data,{headers:headers}).map(res=>res);
  }
}

在login.component.ts

中

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  User : Logindetails;
  user_data: any;
  token: string;
  constructor( private useraction_service : AppService,) {
     }

  ngOnInit() {
    this.User = {
      username : "",
      email : "",
      password : ""
    }
  }
  loginform(User) {
    this.useraction_service.user_action_url = 'http://localhost:3000/login/';
    this.useraction_service.data = this.User;
    this.useraction_service.post_method().subscribe(res => {
      this.user_data = res.json();
      if(this.user_data.status == 2 ) {
        console.log('wrong credentials');
      } else {
          console.log('logged in successfully');
          }
      }
    },(error: any) => {
        console.log(error);
    }
  );
  }
}
interface Logindetails {
  email : String;
  password : String;
}

app.component.html

<form class="example-form" name="loginform" #login="ngForm" (ngSubmit)="loginform(User)" novalidate>
    <mat-form-field>
      <input matInput name="emailid" [(ngModel)]="User.email" [(ngModel)]="User.username"  #email="ngModel" placeholder="Enter your username or Email ID" required>
    </mat-form-field>
    <mat-form-field>
      <input matInput name="password" [(ngModel)]="User.password" #email="ngModel" placeholder="Enter your Password" required>
    </mat-form-field>
    <div class="register_btn">
      <button type="submit" mat-raised-button color="accent" [disabled]="!login.form.valid">Login</button>
    </div>  
  </form>

Answer 2

您需要订阅您的observable以实际执行http请求。

希望有所帮助

Answer 3

感谢您的回复。

我找到了正确答案。

resetPasswordCall(input, jwt) {
    //adding body like this
    var body = 'newPassword=' + input.newPassword + '&confirmPassword=' + input.confirmPassword;
    
    
    return this.httpClient.post(AppSettings.API_CACHE + 'scoraChangePassword/' + jwt, body, {
    //setting headers
      headers: new HttpHeaders().set('content-type', 'application/x-www-form-urlencoded'),
    }).map(res => res);
  }

如何在Angular中使用特定内容类型发布请求

3 个答案: