При загрузке в Angular 6 + Spring не сохраняется ключ к @OneToMany

Question

У меня есть приложение в передней части, я использую угловую и заднюю часть 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;
}

и вот мой класс "Класс":

@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>

и Угловой код: 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