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

Question

我刚刚开始处理 node 和 angular，我无法将我的 nodejs 文件中的 JSON 数据传递给我的 angular 组件并通过单击按钮将其呈现在屏幕上。谢谢你的帮助。

这是我要传递的 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">

希望对你有帮助！