javascript - 如何将数据从 Angular 应用程序组件发送到 index.js(节点服务器)
问题描述
我已经尝试了很多次但我不知道如何将变量发送到服务器
我在角度组件app.component.ts中有 these 3 个变量
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import {
HttpHeaders,
HttpParams,
HttpClientModule,
HttpClient,
} from '@angular/common/http';
@Component({
selector: 'app-linechart',
templateUrl: './linechart.component.html',
styleUrls: ['./linechart.component.scss'],
})
export class LinechartComponent implements OnInit {
public lineChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: true,
title: {
display: true,
position: 'left',
text: 'worldwide Covid 19 Case Summary',
},
legend: {
position: 'top',
align: 'start',
},
// We use these empty structures as placeholders for dynamic theming.
scales: {
xAxes: [
{
ticks: {
autoSkip: true,
//max:500
maxRotation: 0,
minRotation: 0,
},
},
],
yAxes: [{}],
},
};
public lineChartLabels: Label[] = [
'2006',
'2007',
'2008',
'2009',
'2010',
'2011',
'2012',
];
public lineChartType: ChartType = 'line';
public lineChartLegend = true;
public lineChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
];
countries: any;
countryCode: any;
startDate: any;
endDate: any;
constructor(private oip: DataService, private http: HttpClient) {}
ngOnInit() {
this.oip.getCountries().subscribe((data) => {
this.countries = data;
console.log(this.countries);
});
}
getCoronaDataRange(txtSD: any, txtED: any) {
this.startDate = txtSD.value;
this.endDate = txtED.value;
console.log(this.startDate);
console.log(this.endDate);
}
getCountryCode(countryCode: any) {
this.countryCode = countryCode;
console.log(this.countryCode);
}
}
我想将它们传递给我的服务器index.js的参数而不是参数:{ startDate:'2019-01-05', endDate:'2020-09-21', countryCode:'MY' }
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();
const http = require('http');
const server = http.createServer(app);
const port = 4600;
var corsOptions = {
origin: ["http://localhost:4200","http://localhost:4000"]
}
app.use(cors(corsOptions));
app.get('/', (req, res) => {
res.status(200).send('starting server');
})
app.get('/corona-data', (req, res) => {
axios({
method: 'GET',
baseURL: 'https://api.oip.tmrnd.com.my',
url: 'app/t/opendata.oip.tm.com.my/coronatracker/1.0.0/country',
params: {
startDate:'2019-01-05',
endDate:'2020-09-21',
countryCode:'MY'
},
headers: {
Authorization : 'Bearer 0e9ceb08-9a2c-3311-999e-59a2989deb3f'
}
}).then((result) => {
console.log(result.data);
res.status(200).json(result.data);
}).catch(error => {
console.error('Error Has Occured');
console.log(error);
res.status(500).json(error.message);
});
});
// Start the service
server.listen(port, () => {
console.log('Server is listening to port ' + port);
})
解决方案
当您想要请求 API 时执行以下代码。
const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('startDate', this.startDate);
body = body.set('countyCode', this.coutryCode);
body = body.set('endDate', this.endDate);
http
.post('/your-server-api-url', body, {
headers: myheader),
})
.subscribe();
推荐阅读
- c++ - 如何强制 Arduino 库编译子文件夹中的代码?
- multithreading - 连接速度慢的客户端能否破坏基于阻塞套接字的服务器?
- r - 想要在 ggdistribution 图中以 10 为间隔的序列
- python - 分配与特定列匹配的 ID 列
- flutter - 加速度计数据的“getter 'x' was called on null”
- pine-script - 使用 EMA 进行 Pinescript 回测
- c++ - C++ School 项目在控制台上绘制一个由 * 字符组成的菱形
- ios - 内部带有 IBDesignable UIView 的自定义 UIView 未在应用程序中显示
- ansible - 从列表中排除 AnsibleUndefined
- latex - 在 Latex 中绘制 CNN 模型