попадание в конечную точку из angular8 возвращает 404

Question

Это мое первое упражнение в angular8. Я пытаюсь создать форму, которая использует API, написанный на Springboot. API, написанный на spring-boot, никогда не выполняется при попытке использовать его из angular8, а вот конечная точка

http://localhost:8080/api/startreg




@PostMapping("/startreg")
    public ResponseData<Activity> addReg(
            @RequestParam(value="firstDate") String firstDate,@RequestParam(value="secondDate") String secondDate
            ,@RequestParam(value="username") String username) {

            try {

Вот скрипт service.ts

private baseUrl = 'http://localhost:8080/api/startreg';
createReg(activity: Object): Observable<Object> { 
    return this.http.post('${this.baseUrl}', activity);
  }

html-файлangular8 отображается

<form (ngSubmit)="onSubmit()">

              <div class="col-md-3 col-sm-5 col-xs-12 gutter">
                <div class="sales">
                  <h2>From:</h2>
                  <div class="btn-group">              
                   <select [(ngModel)]="activity.firstDate" class="form-control" name="firstDate"> 

, когда я пытаюсь отправить форму, из консоли браузера ниже ошибка

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4202/$%7Bthis.baseUrl%7D", ok: false, …}

Пожалуйста, где я неправильно понимаю

Answer 1

Поскольку this.http.post('${this.baseUrl}', activity); не будет вызывать службу со значением this.baseUrl, вы можете узнать, почему по сообщению об ошибке. URL, который вы передали post, все еще является строкой , а не переменной .

Пожалуйста, измените service.ts следующим образом:

...
    return this.http.post(this.baseUrl, activity);
}

ОБНОВЛЕНИЕ

Другая проблема заключается в том, что ваша служба использует параметры запроса, поэтому вы должны передать эти аргументы URL для HTTP-запроса в service.ts.

Действительный URL должен выглядеть следующим образом:
http://localhost:8080/api/startreg?firstDate=XXX&secondDate=XXX&username=XXX

Но я не знаком с TypeScript , поэтому я не знаю, как это сделать,Может быть, вы можете обратиться к Angular2 - параметры запроса POST Http .

Кстати, я настоятельно рекомендую вам использовать @RequestBody вместо @RequestParam для службы POST .