Angular 8 Post Request issue

Question

[因此，我浏览了很多以前的帖子，但是找不到有效的答案，因此我被迫发布自己的代码，因为我真的需要尽快完成一个项目的前端工作：我的应用程序由一个简单的表单组成，该表单具有一个字段和一个位于其下方的按钮，用于将结果提交给通过springboot后端运行的mySQL服务器，以添加额外的行。AppModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';
import { SerachDeleteComponent } from './serach-delete/serach-delete.component';
import { UserRegistationService } from './user-registation.service';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent,
    SerachDeleteComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [UserRegistationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

UserRegistrationService：

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


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

  constructor(private http: HttpClient) { }



  public getUsers(){
    return this.http.get('http://localhost:8081/eval');
  }

  public getUserByID(ideval){
    return this.http.get('http://localhost:8081/eval/'+ideval);
  }

  public deleteUser(ideval){
    return this.http.delete('http://localhost:8081/eval/' +ideval);
  }
  public doRegistration(user: User): Observable<User> {
    return this.http.post<User>('http://localhost:8081/eval/', JSON.stringify(user) );

  }
}

RegistrationComponent.ts：

import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserRegistationService } from '../user-registation.service';
import { HttpClient} from '@angular/common/http';

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


  user: User = new User(586, 858, 789, 0, '2020-05-02');
  message: any;

  constructor(private service: UserRegistationService) { }

  ngOnInit() {
  }


  public registerNow() {
const resp = this.service.doRegistration(this.user);
resp.subscribe((data) => this.user = data);
  }

}

RegistrationComponent HTML：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div style="text-align: center">
    <h1>{{message}}</h1>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form>
                <fieldset>
                    <legend class="text-center">Evaluation : <span class="req"><small>
                                </small></span></legend>

                    <div class="form-group">
                        <label for="note"><span class="req">* </span> Note: <small>Veuillez noter le voyage globalement
                                </small> </label>
                        <input required type="number" [(ngModel)]="user.note" name="note" id="note"
                            class="form-control phone" maxlength="28" placeholder="Notez sur 10..." />
                    </div>





                    <div class="form-group">
                        <input class="btn btn-success" type="submit" name="submit_reg" value="Evaluer" (click)="registerNow()">
                    </div>
                </fieldset>
            </form><!-- ends register form -->
            <!-- second for to fiter user-->
        </div><!-- ends col-6 -->

    </div>
</div>

用户类（user.ts）：

export class User {
    ideval: number;
    idvoyageur: number;
    idvoyage: number;
    note: number;
    dateevaluation: string;
    constructor(
        ideval: number= 586,
        idvoyageur: number= 858,
        idvoyage: number= 789,
        note: number= 0,
        dateevalaution: string= '2020-05-02',
    ) {}
}

[请不要介意服务中的获取和删除请求，因为它们可以正常工作，这让我感到困惑，尽管发布请求确实可以通过邮递员工作到完全相同的URL，但发布请求仍然无法工作，订阅看起来像以及我遵循用于get请求的相同语法（有效）...问题出在哪里？我也没有遇到任何错误，并且页面可以很好地加载，单击按钮根本不会在数据库中添加多余的行。

Answer 1

问题很可能是您的后端代码。您的后端可能不允许使用表单数据进行请求。查看有关如何允许此操作的信息：How to send formData in angular with a file to spring boot backend