Как отправить угловой ввод html-формы в веб-контроллер rest boot rest

Question

Я пытаюсь отправить список из 1 или более генов в мой бэкэнд, через угловой интерфейс и веб-контроллер отдыха с пружинной загрузкой

моя HTML-страница:

<div class="container">
  <h1>Clustertool gene(s) input</h1>
  <form (ngSubmit)="onSubmit()" #clusterForm="ngForm">
    <div class="form-group">
      <label for="gene">gene(s) </label>
      <input type="text" class="form-control" id="gene" required>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
    </form>
</div>

компонент

import { Component, OnInit } from '@angular/core';
import { ClustertoolService} from "../../clustertool.service";

@Component({
  selector: 'app-cluster-tool',
  templateUrl: './cluster-tool.component.html',
  styleUrls: ['./cluster-tool.component.css']
})
export class ClusterToolComponent implements OnInit {
  onSubmit() {
    this.clustertoolService.getCell()
  }
  constructor(private clustertoolService: ClustertoolService) { }

  ngOnInit() {
    this.clustertoolService.getCell()
  }
}

сервисная страница

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

@Injectable({
  providedIn: 'root'
})
export class ClustertoolService {
  private clusterUrl: string;

  constructor(private http: HttpClient) {
    this.clusterUrl = 'localhost:8080/clustertool/singleGene';
  }
  getCell(): Observable<any> {
    return this.http.get(this.clusterUrl);
  }
}

модуль маршрутизации приложений

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

веб-контроллер

package singleCell.controllers.WebController;

import org.springframework.web.bind.annotation.*;
import singleCell.DatabaseAccess.DAO.DatabaseRetriever;
import java.util.ArrayList;
import java.util.List;

@RestController
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping("/clustertool")
public class ClusterController {

    @RequestMapping(value = "/singleGene", method = RequestMethod.GET)
            public ArrayList singleGeneResponse(@RequestParam String gene){
        return DatabaseRetriever.getSingleGene(gene);
    }

    @RequestMapping(value = "/multipleGenes", method = RequestMethod.GET)
    public ArrayList multipleGeneResponse(@RequestParam List<String> genes){
        System.out.println(genes);
        return DatabaseRetriever.getMultipleGenes(genes);
    }

}

я хочу отправить бэкэнд-результатна внешний интерфейс, так что я могу использовать его там в дальнейшем.собираюсь строить графики из данных с помощью библиотек js.

Answer 1

Прежде всего, ваш ClustertoolService.getCell() должен принять параметр для gene

getCell(gene: string): Observable<any> {
  return this.http.get(this.clusterUrl+'?gene='+gene);
}

Затем вы должны вызвать этот метод при отправке формы с входным значением.

onSubmit() {
  this.clustertoolService.getCell(this.geneModel); // geneModel is ngModel for your input.
}

РЕДАКТИРОВАТЬ: в вашем HTML, вам необходимо определить ngModel в поле ввода гена

<input type="text" class="form-control" id="gene" [(ngModel)]="geneModel" required>