Как отправить параметр из формы Angular9 html в контроллер Springboot2 - PullRequest
Новая
       4

Как отправить параметр из формы Angular9 html в контроллер Springboot2

0 голосов
/ 08 мая 2020

Я новичок в Angular 9 и задаюсь вопросом, как мне собрать параметры из формы HTML в контроллер SpringBoot. Мне нужно передать 3 переменные, а именно fromDate, toDate и interval.

HTML образец формы: 

<div class="container">
  <h1>Chart input</h1>
  <form class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label for="fromDate" class="sr-only">From Date</label>
      <input type="fromDate" class="form-control" id="fromDate" placeholder="From Date">
      <label for="toDate" class="sr-only">To Date</label>
      <input type="toDate" class="form-control" id="toDate" placeholder="To Date">
      <label for="intervalSelected">Interval Selected</label>
      <select class="form-control" id="intervalSelected" name="interval">
        <option value="1 min">1 min</option>
        <option value="5 mins">5 mins</option>
        <option value="15 mins">15 mins</option>
        <option value="30 mins">30 mins</option>
        <option value="1 day">1 day</option>
      </select>
    </div>
    <!--<input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">-->
    <button type="submit" class="btn btn-primary mb-2">Plot Chart</button>
  </form>
</div>

component.ts: 

import { Component, NgZone, OnInit } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { Router, ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';
import 'jqueryui';

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-plot-chart',
  templateUrl: './plot-chart.component.html',
  styleUrls: ['./plot-chart.component.css']
})
export class PlotChartComponent implements OnInit{

service.ts 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/api/';

  constructor(private http: HttpClient) { }

  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/employees/${id}`);
  }

Контроллер Spring: (Содержимое не слишком актуально, за исключением приема 3 параметров запроса) 

    @RequestMapping(value = "candlestick", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public @ResponseBody JsonArray getAllPlot(@RequestParam("fromDate") String fromDate, 
                                              @RequestParam("toDate") String toDate, 
                                              @RequestParam("interval") Integer interval) {
        Test app = new Test();

        Contract con = new Contract();
        con.symbol("EUR");
        con.exchange("IDEALPRO");
        con.secType("CASH");
        con.currency("USD");

        app.run(con, period, interval, sleepTime);

        JsonArray json = app.getOhlcJson();

        return json;
    }

1 Ответ

0 голосов
/ 08 мая 2020

URL-адрес reqParams похож на http://localhost:8080/employees?id=?. Поэтому я думаю, что вы должны изменить в service.ts например 

getEmployee(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/employees?id=${id}`);
}
...