如何将 JSON 数据从节点发送到 angular 4 [英] How to send JSON data from node to angular 4
本文介绍了如何将 JSON 数据从节点发送到 angular 4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我刚刚开始研究 node 和 angular,我无法将 nodejs 文件中的 JSON 数据传递给我的 angular 组件,并在单击按钮时将其呈现在屏幕上.谢谢你的帮助.
I have just started working on node and angular and I am unable to pass JSON data which I have on my nodejs file to my angular component and render it on the screen on click of a button. Thank you for the help.
这是我要传递的JSON数据
This is the JSON data I want to pass
{
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;
}
);
}
}
打字稿文件看起来像这样
And the typescript file looks like this
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)
);
}
}
推荐答案
nodejs + expressjs
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
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
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
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
funds.component.html
<input type="text" [(ngModel)]="funds.Bank_Name">
希望有帮助!
这篇关于如何将 JSON 数据从节点发送到 angular 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文