如何将JSON数据从节点发送到角4

Question

我刚刚开始研究节点和角度，我无法将JSON数据传递给我的角度组件，并在点击屏幕上将其呈现在屏幕上一个按钮。感谢您的帮助。

这是我要传递的JSON数据

{ 
Customer_ID: 1507843123970, 
Bank_Account_Number: 7885236985412589, 
Bank_Name: "Some Bank", 
Bank_Address1: "Some Address", 
Bank_Address2: null, 
Account_Holder_Name: "Some Name", 
Account_Type: "Savings", 
Transaction_Limit: 5000 
} 

我的服务文件看起来像这样

@Injectable() 
export class ServerService { 
constructor(private http: Http) {} 

getServer() { 
    return this.http.get('http://localhost:3000/addFunds') 
    .map(
     (response: Response) => { 
     const data = response.json(); 
     return data; 
     } 
    ); 
    } 
} 

而且打字稿文件看起来像这样

export class AddFundComponent implements OnInit { 
@ViewChild('addFundForm') addFundForm: NgForm; 
showHidden = false; 
showBankDetail = false; 
showSubmit = true; 

servers: Observable<any>; 

constructor(private serverService: ServerService) { } 

ngOnInit() { 
    this.servers = this.serverService.getServer(); 
} 
onGet() { 
    this.serverService.getServer().subscribe(
    (data) => { 
     // const data = response.json(); 
     console.log(data); 
    }, 
    (error) => console.log(error) 
); 
} 
} 

Answer 1

的NodeJS + expressjs

const express = require('express'), 
     config = require('./config'), 
     app = express(); 

app.get('/addFunds', (req, res) => { 
     res.json({ 
      Customer_ID: 1507843123970, 
      Bank_Account_Number: 7885236985412589, 
      Bank_Name: "Some Bank", 
      Bank_Address1: "Some Address", 
      Bank_Address2: null, 
      Account_Holder_Name: "Some Name", 
      Account_Type: "Savings", 
      Transaction_Limit: 5000 
     }); 
    }); 

app.listen(config.port, function(){ 
    console.log('http://127.0.0.1:' + config.port); 
}); 

module.exports = app; 

http.service.ts

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

@Injectable() 
export class HttpService { 
    private actionUrl: string; 
    private headers: Headers; 
    private options: RequestOptions; 

    constructor(public _http: Http) { 
    this.actionUrl = 'example.com'; 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Accept', 'application/json'); 
    this.headers.append('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN'); 
    this.headers.append('Access-Control-Allow-Origin', '*'); 
    this.options = new RequestOptions({ headers: this.headers }); 
    } 

    get(request: string): Observable<any> { 
    return this._http.get(`${this.actionUrl}${request}`) 
     .map(res => this.extractData(res)) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    return res.json(); 
    } 

    private handleError(error: Response) { 
    console.log('Error', error); 
    return Observable.throw(error.json().error || 'Server error'); 
    } 

} 

funds.service.ts

import { Injectable } from '@angular/core'; 
import { HttpService } from './http.service'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class FundsService { 
    constructor(public httpService: HttpService) {} 

    getFunds(): Observable<any> { 
    return this.httpService.get('/addFunds') 
     .map(res => res); 
    } 
} 

funds.component.ts

export class FundsComponent { 
funds: Funds; 

constructor(private fundsService: FundsService) { 
    this.funds = new Funds(); 
} 

onGet() { 
    this.fundsService.getFunds().subscribe(
     data => { 
      console.log(data); 
      this.funds = data; 
     } 
    ); 
    } 
} 

funds.component.html

<input type="text" [(ngModel)]="funds.Bank_Name"> 

希望它有帮助！