无法将数据从Angle 2前端发送到后端Rest API

Question

如何从后端调用rest api发送数据并获取json对象中的用户数据

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { User } from '../_models/index';

import { Http, Response, Headers, RequestOptions } from '@angular/http';


@Injectable()
export class UserService {
constructor(private http: HttpClient) { }



create(user: User) {
    console.log("in create user");
 return this._http.get("http:// localhost:8082/register").map(res => 
res.json());
//    return this.http.post('/api/users', user);
}
}

上面是angular2 service.ts代码，用于将用户数据发送给其他用户

下面是RegisterComponent component.ts代码：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { AlertService, UserService } from '../_services/index';

@Component({
moduleId: module.id.toString(),
templateUrl: 'register.component.html'
})

export class RegisterComponent {
model: any = {};
loading = false;

constructor(
    private router: Router,
    private userService: UserService,
    private alertService: AlertService) { }

register() {
    this.loading = true;
    this.userService.create(this.model)
        .subscribe(
            data => {
                this.alertService.success('Registration successful', true);
                this.router.navigate(['/login']);
            },
            error => {
                this.alertService.error(error);
                this.loading = false;
            });
}

}

从上面的组件创建是从我想在后端api中调用post方法的地方调用服务方法创建

下面是REST API

@RequestMapping(value = "/register", method = RequestMethod.POST, produces = { MediaType.APPLICATION_JSON_VALUE,
        MediaType.APPLICATION_XML_VALUE })
public ResponseEntity<Void> registrationUser(@RequestBody UserDetails user, HttpServletRequest request,
        HttpSession session, HttpServletResponse response) {
    if (user.getEmail() != null && user.getName() != null && user.getPhoneNumber() != null
            && user.getPassword() != null) {
        String name = user.getName();
        String email = user.getEmail();
        String phoneNumber = user.getPhoneNumber();
        String password = user.getPassword();
        {....
       }

                SendMail.sendMail(to, subject, msg);
                System.out.println("mail send");
                return new ResponseEntity<Void>(HttpStatus.OK);
            }
            return new ResponseEntity<Void>(HttpStatus.CONFLICT);

        } else
            return new ResponseEntity<Void>(HttpStatus.CONFLICT);
    }
    return new ResponseEntity<Void>(HttpStatus.CONFLICT);
}

错误：src / app / _services / user.service.ts（6,57）中的错误：错误TS2307：找不到模块'@ angular / http'。 src / app / _services / user.service.ts（28,14）：错误TS2551：类型'UserService'上不存在属性'_http'。 您是说“ http”吗？

Answer 1

该代码段来自您第一个代码块中的代码。

return this._http.get("http:// localhost:8082/register").map(res => res.json());

我相信你想读这行

return this.http.get("http:// localhost:8082/register").map(res => res.json());

这似乎是错误所抱怨的。 祝好运！

Answer 2

第一个错误

错误：src / app / _services / user.service.ts（6,57）中的错误：错误TS2307：找不到模块'@ angular / http

在app.module.ts中添加HttpModule

 import {HttpModule} from '@angular/http'

 @NgModule({
    imports:[
      HttpModule
    ]
 })

第二次错误

错误TS2551：类型'UserService'上不存在属性'_http'。 您是说“ http”吗？

您的代码看起来不对

constructor(private http: HttpClient) { }

声明的变量名http。 但是你用像_http

 return this._http.get("http:// localhost:8082/register").map(res => 

因此更改该行this.http而不是this._http

 return this.http.get("http:// localhost:8082/register").map(res => 

我希望这可以解决您的错误。