Angular:具有多个参数的HTTP POST不起作用

Question

My Frontend是用Angular制作的。后端是用Java Spring制作的。

我有两个实体essen(meal)和essensplan (mealplan)。每个essensplan由essen的五个对象组成，在JavaSpring中配置为ManyToMany关系。

模板在选择框中显示essen的每个对象。使用[ngValue]="essen"，我将对象essen传递给我的组件和服务中的方法addEssenToEssensplan。

essensplan detail.component.html

<form *ngIf="essensplan">
<div class="form-group">
<select [(ngModel)]="essen" class="form-control" [ngModelOptions]="{standalone: true}">
<option *ngFor="let essen of speisekarte" [ngValue]="essen" label="{{essen.name}}"></option>
</select>
</div>
<button (click)="addEssenToEssensplan(essen)" type="button" class="btn btn- 
primary">Hinzufügen</button>
</form>

essensplan detail.component.ts

addEssenToEssensplan(essen: Essen): void {
this.essensplanService.addEssenToEssensplan(this.essensplan, essen);
}

essensplan.service.ts

addEssenToEssensplan(essensplan: Essensplan | number, essen: Essen): Observable<Essen> {
const essensplanId = typeof essensplan === 'number' ? essensplan : essensplan.id;
const currentEssen = essen;
const url = `${this.essensplanUrl}/${essensplanId}/add`;
const data = {id: essensplanId, essen: currentEssen};
return this.http.post<Essen>(url, data);
}

Java Spring中的控制器

@PostMapping(path = "/{id}/add")
public void addEssenToEssensplan(@PathVariable("id") int id, @RequestBody Essen essen) {
essensplanService.addEssenToEssensplan(id, essen);
}

服务：

@Transactional
public Essensplan addEssenToEssensplan(int id, Essen essen) {
Optional<Essensplan> optionalEssensplan = essensplanRepository.findById(id);
if (optionalEssensplan.isPresent()) {
Essensplan essensplan = optionalEssensplan.get();
essensplan.getEssenProWoche().add(essen);
return essensplan;
} else return null;
}

我已经通过Postman客户端(例如http://localhost:8080/essensplan/2/add(发出了POST请求，并且成功了。对我来说，POST请求似乎没有到达我的JavaSpring控制器。

Answer 1

错误在您的数据对象中。您不需要将essensplanId放在那里。它不是请求主体的一部分，而是PathVariable。

尝试：

addEssenToEssensplan(essensplan: Essensplan | number, essen: Essen): Observable<Essen> {
const essensplanId = typeof essensplan === 'number' ? essensplan : essensplan.id;
return this.http.post<Essen>(`${this.essensplanUrl}/${essensplanId}/add`, {essen});
}

编辑：

您还需要在某个时间订阅您的observable，否则请求将永远不会执行：

addEssenToEssensplan(essen: Essen): void {
this.essensplanService.addEssenToEssensplan(this.essensplan, essen).subscribe();
}