如何从Angular9 html表单向Springboot2控件发送参数

Question

我是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;
    }

Answer 1

reqParams URL类似于http://localhost:8080/employees?id=?。所以我认为你必须像这样在service.ts中改变

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