Angular Httpclient 没有访问后端 API

Question

我有以下代码来使用 Play 应用程序提供的后端 API。 API http://localhost:9000/ws/users/get 如果我在浏览器 window 上输入它，它就可以工作（我看到 window 上的响应 hello from get user controller 以及调试打印 `get用户在我的播放应用程序中请求）但是 Angular 代码似乎没有向后端发送任何内容（我在播放或浏览器的 window 中根本没有看到任何调试）。

问题 1 - 如何调试 Angular 发送消息的位置问题 2 - 为什么代码不起作用？

import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { HttpClient} from '@angular/common/http';
import {User} from "./user";

@Injectable()
export class WebToBackendInterfaceService {

  API_URL = environment.apiUrl; 
  ADD_USER_URL = environment.addUserUrl;
  GET_USER_URL = environment.getUserUrl;
  constructor(private http:HttpClient) { }

  public createUser(user:User):any{
    console.log('contacting server at '+this.API_URL +this.ADD_USER_URL +" with user data ",user); //if I click this link directly fro browser's debug window then I see response from the server
    this.http.post(this.API_URL +this.ADD_USER_URL,user)
      .map(response => { 
        console.log('response from backend service',response);
        return response;
      })
      .catch(this.handleError); //error handler if Observable fails
  }

  public getUser(id:string):any{
    console.log('contacting server at '+this.API_URL +this.GET_USER_URL +" with user data "+id);
    this.http.get(this.API_URL+this.GET_USER_URL)
      .map(response=>{
        console.log('response from backend service',response);
        return response;
      })
      .catch(this.handleError);
  }

  private handleError (error: Response | any) {
    console.error('WebToBackendInterfaceService::handleError', error);
    return 'error from the server:'+error;
  }

}

Answer 1

所以这里是通过angular

服务器调用的简单演示

您的应用程序中必须有 service.ts 文件，它将连接到 back-end 服务器，该文件通常用于服务器和 front-end 之间的连接。

import { Injectable } from '@angular/core';
import {ColaboratorResponse} from '../domain/colaborator.response';
import {Colaborator} from '../domain/colaborator';
import { Headers, RequestOptions, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

export class YourService{

constructor(private httpClient: HttpClient) {}
getUser(id:string){   
   return this.httpClient.get(this.API_URL+this.GET_USER_URL);
}

现在您必须在您的组件中使用此服务。无论你想在哪里调用这个 getUser 函数，比如

首先导入您的服务

import {ColaboratorService} from 'from/your/service/location';

在组件构造函数中初始化它

constructor(
       private confirmationService: ConfirmationService,
       private _ser: YourService
     ) {}

并通过创建一个函数在组件中调用它

getUserDetails(){
this._ser.getUser(id).subscribe((User : any)=>{this.User =User;});

//console.log('here'+this.User);


}

所以这是你的 this.User 对象

import {User} from "./user";

希望这对您有所帮助。

Angular Httpclient 没有访问后端 API

Angular Httpclient not hitting backend API

angular

angular-httpclient