Angular 6 + Spring Boot Rest没有将前键保存到@OneToMany关系

Question

我在前端有一个应用程序，我使用angular，后面使用en，我使用Spring boot rest。我有一个与"Niveau"有关联的类@OneToMany与另一个类似"classes".的类，因此当我尝试在表“ classe”上添加元素时，foreing key "niveau_id" is always "null"。

这是我班的Niveau

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Niveau implements Serializable {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String nomNiveau;
    @OneToMany(mappedBy = "niveau")
    private Collection<Classe> classes;
}

这是我的课程“ Classe”：

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Classe implements Serializable {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String nomClasse;
    private String anneeScolaire;
    @OneToMany(mappedBy = "classe")
    private Collection<Etudiant> etudiants;
    @ManyToOne
    private Niveau niveau;
}

角度代码：Classe.componet.html：

<div class="col-md-11">
  <div class="panel panel-primary">
    <div class="panel-heading">Gestion des classes</div>
    <div class="panel-body">
      <div class="col-md-6 col-md-offset-3">
        <form #f="ngForm" (ngSubmit)="onSaveCla(f.value)">
          <div class="form-group">
            <label class="control-label">Nom Classe</label>
            <input type="text" name="nomClasse" ngModel class="form-control" />
          </div>
          <div class="form-group">
            <label class="control-label">Année scolaire</label>
            <input type="text" name="annee-scolaire" ngModel class="form-control" />
          </div>
          <div class="form-group" *ngIf="listNiveaux">
            <label>Niveaux</label>
            <select name="niveau_id" id="niveau_id" class="form-control" ngModel>
              <option *ngFor="let niv of listNiveaux._embedded.niveaus" value="{{niv.id}}">
                {{niv.nomNiveau}}
              </option>
            </select>
          </div>

          <button class="btn btn-success" type="submit">Save</button>
        </form>
      </div>
    </div>
  </div>
</div>

和Angular代码：classe.component.ts是这样的：

onSaveCla(data: any) {
    console.log(data);
    this.claService.saveResource(this.claService.host+"/classes",data)
      .subscribe(resp=>{
        console.log(resp);

      },err=>{
        console.log(err);
      })
  }
  getAllNiveaux(){
    // console.log();
    this.claService.getAllCNiveaux()
      .subscribe(data=>{
        this.listNiveaux=data;
      },err=>{
        console.log(err);
      })
  }

这是我的classe.service.ts：

 getAllCNiveaux():Observable<any>{
    return this.http.get('//localhost:8080/niveaus');
  }
saveResource(url, data){
    return this.http.post(url,data);
  }

这是表“ Classe”的捕获： Table Classe