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：找不到模块＆＃39; @ angular / http＆＃39;。 src / app / _services / user.service.ts（28,14）：错误TS2551：属性＆＃39; _http＆＃39;类型＆＃39; UserService＆＃39;中不存在。你是说＆＃39; http＆＃39;？

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：找不到模块＆＃39; @ angular / http

在app.module.ts中添加HttpModule

 import {HttpModule} from '@angular/http'

 @NgModule({
    imports:[
      HttpModule
    ]
 })

第二次错误

错误TS2551：属性＆＃39; _http＆＃39;类型＆＃39; UserService＆＃39;中不存在。你是说＆＃39; http＆＃39;？

你的代码看错了

constructor(private http: HttpClient) { }

声明变量名称http。但是你喜欢_http

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

所以改变那行.http而不是this._http

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

我希望这能解决你的错误。

无法从角2前端发送数据到后端休息api

2 个答案: