Question

这是我第一次在angular8中练习。我正在尝试制作使用使用springboot编写的API的表单。尝试从angular8使用它时，永远不会执行用spring-boot编写的api，这是端点

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);
  }

显示了angular8的html文件

<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的服务，因此您可以根据错误消息找出原因。您传递给post的URL仍然是字符串，而不是变量。

请如下修改service.ts：

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

更新

另一个问题是您的服务使用了请求参数，因此您必须在service.ts中为HTTP请求传递这些URL参数。

有效网址应如下所示：
http://localhost:8080/api/startreg?firstDate=XXX&secondDate=XXX&username=XXX

但是我不熟悉 TypeScript ，所以我不知道该怎么做。也许您可以参考Angular2 - Http POST request parameters。

顺便说一句，我强烈建议您在 POST 服务中使用@RequestBody而不是@RequestParam。

从angular8击中端点将返回404

1 个答案: