如何在 Angular 6 中显示 Spring Boot Data JPA Query 的响应

Posted 2023-02-27

【中文标题】如何在 Angular 6 中显示 Spring Boot Data JPA Query 的响应

【英文标题】：How to show response of Spring Boot Data JPA Query in Angular 6

【发布时间】：2019-06-04 00:28:59

【问题描述】：

我之前的问题Spring Boot Data JPA - how to get data for the certain id是连续的 在我的 Spring Boot 应用程序中，我有这样一个查询：

public interface FlightTicketRepository extends JpaRepository<Ticket, Integer> 

@Query("SELECT new dto.FlightTicketDto(t.ticket_id, f.departureDate, f.destinationDate, t.name, t.surname) "
        + "FROM Flight f INNER JOIN f.tickets t where t.ticket_id = :ticket_id")
List<FlightTicketDto> findByTicketId(Integer ticket_id);

还有这样的控制器

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class FlightTicketController 

@Autowired
FlightTicketRepository flightTicketRepository;

@GetMapping("/mytickets/ticket_id")
public List fetchEmpDeptDataInnerJoin(@PathVariable Integer ticket_id) 
    return flightTicketRepository.findByTicketId(ticket_id);

我的@Query 一切正常，我得到了这样的结果：

我想在使用 Angular 6 的 Web 应用程序中显示此结果

FlightTicket.ts

export class FlightTicket 
 ticket_id: number;
 departureDate: Date;
 destinationDate: Date;
 name: string;
 surname: string;

FlightTicketService.ts

 export class FlightTicketService 

 private baseUrl = 'http://localhost:8080/api/mytickets';

 constructor(private http: HttpClient) 
 

 fetchEmpDeptDataInnerJoin(ticket_id: number): Observable<FlightTicket> 
 return this.http.get<FlightTicket>(`$this.baseUrl/$ticket_id`);
 

mytickets-list.component.html - 在这里我想显示我的查询响应

<div *ngIf="flightTicket">
<label>Destination date: </label>  flightTicket.destinationDate <br/>
<label>Departure date: </label>  flightTicket.departureDate <br/>
<label>Name: </label>  flightTicket.name <br/>
<label>Surname: </label>  flightTicket.surname <br/>
<label>id: </label>  flightTicket.ticket_id <br/>

myticketslist-component.ts

export class MyticketsListComponent implements OnInit 

 flightTicket: FlightTicket = new FlightTicket( );
 flightTickets: Observable<FlightTicket[]>;
 ticket_id: number;

 constructor(private flightTicketService: FlightTicketService)  

 ngOnInit() 
 this.ticket_id = 443;
 this.reloadData();
 

reloadData() 
this.flightTicketService.fetchEmpDeptDataInnerJoin(this.ticket_id).
subscribe((response) => 
  this.flightTicket = response;
);

这是结果。空的。怎么了？

【问题讨论】：

您确定请求已成功发送吗？对我来说，订阅根本没有被调用。因为flightTicket: FlightTicket = new FlightTicket( );所以显示空标签所以ngIf='flightTicket'是真的。

在我的应用程序的其他类中，我有相同的，没关系。这里的问题可能是我的数据库中没有这样的表flightTicket。那么我应该在 FlightTicket.ts 中创建一个构造函数，并在此处输入一些参数=new FlightTicket() 吗？但问题是我想从我的数据库中获取参数，而不是默认情况下。

问题不在于后端，因为您已经注意到后端返回正确的结果。在浏览器中检查控制台并验证响应状态和正文是否正常。

我如何检查这个？

Network request details 也许这会对你有所帮助

【参考方案1】：

好的，我已经使用Augury 进行了调试，发现我的 json 响应就像一个数组，而不是一个对象（应该是）

所以我改变了我的后端：

@GetMapping("/mytickets/ticket_id")
public ResponseEntity<FlightTicketDto> fetchEmpDeptDataInnerJoin(@PathVariable("ticket_id") Integer ticket_id) 
    FlightTicketDto flight = flightTicketRepository.findByTicketId(ticket_id);
    return new ResponseEntity<>(flight, HttpStatus.OK);

这里：

@Query("SELECT new dto.FlightTicketDto(t.ticket_id, f.departureDate, f.destinationDate, t.name, t.surname) "
        + "FROM Flight f INNER JOIN f.tickets t where t.ticket_id = :ticket_id")
FlightTicketDto findByTicketId(Integer ticket_id);