Angular 12 前端返回编码获取请求

Question

我将mysql用于我的数据库， spring用于我的后端， angular用于我的前端。 我的前端在正确路由时抛出了这个奇怪的错误：单击此处查看

如您所见，最后的路径是%7Bid%7D （从后端看起来像{id} ）
http 错误代码始终为 3 之一： 400 、 400或500
后端看起来不错，我只真正得到过这个错误代码：

2022-02-04 15:30:31.465  WARN 15200 --- [nio-8081-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "{id}"] 

这是有问题的controller （获取请求）：

@CrossOrigin
@RestController
@RequestMapping(path = "/api/patient")
public class PatientPortalController {
    @Autowired
    private PatientPortalRepo patientPortalRepo;

    @PostMapping("/patientportal")
    public PatientPortal createPatientPortal(@RequestBody PatientPortal patientportal) {
        return patientPortalRepo.save(patientportal);
    }
    
    
    @GetMapping("/patientportal/{id}")
    public ResponseEntity<PatientPortal> getpatientPortal(@PathVariable Long id){
        PatientPortal patientportal = patientPortalRepo.findByPatientPortalId(id);
        if(patientportal.getId()>0 && patientportal!=null)
            return new ResponseEntity<PatientPortal>(patientportal, HttpStatus.OK);
        return new ResponseEntity<PatientPortal>(patientportal, HttpStatus.BAD_REQUEST);
    }}

我在后端尝试过的一些值得注意的事情
尝试将响应实体更改为 long 类型并返回 id ，尝试多次重构 controller ，尝试更改装饰器/路径，20 次检查类型是否正确，检查除 id 之外的任何类型是否在抛出它，检查是否有任何类型实现拒绝访问的安全性，检查添加 onetoone 是否会使其在前端弹出。 它在后端工作正常（返回我认为是患者门户 object的列表）但我要么路由不正确，要么我缺少一些安全性，要么有一些类型错误，或者有一些逻辑错误。 但是我认为问题在于前端。
这是我调用前端方法硬编码要测试的值的代码：

this.patientloginservice.loginPatient(this.patient).subscribe(data=>(this.route.navigate(['api/patient/patientportal/1'])),error=>console.log('error'));

这里是服务代码的地方：

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

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

  private baseURL = "http://localhost:8081/api/patient/patientportal";

  constructor(private httpClient: HttpClient) { }

  getPatientPortalList(): Observable<PatientPortal[]> {
    return this.httpClient.get<PatientPortal[]>(`${this.baseURL}`);
  }

  createPatientPortal(patientportal: PatientPortal): Observable<Object>{
    return this.httpClient.post<Object>(`${this.baseURL}`, patientportal);
  }

  getPatientPortalById(id: number): Observable<PatientPortal>{
    return this.httpClient.get<PatientPortal>(`${this.baseURL}/{id}`);
  }

  updatePatientPortal(id: number, patientportal: PatientPortal): Observable<Object>{
    return this.httpClient.put(`${this.baseURL}/{id}`, patientportal);
  }

  deletePatientPortal(id: number): Observable<Object>{
    return this.httpClient.delete(`${this.baseURL}/{id}`);
  }
}

任何帮助将不胜感激，谢谢。 就像我所说的那样，据我所知，路线路线正确，但是渲染的表不会填充数据并且会引发该错误。 我正在使用一个登录名来重定向/路由到患者的详细信息。

Answer 1

您错误地使用了模板文字。

而不仅仅是{id}它应该是${id}就像你对${this.baseUrl}所做的那样

希望能解决您的问题。