Spring Boot Data JPA查询结果在Angular 6中展示为空，求排查

看起来你的问题出在前后端数据类型不匹配上，具体来说：

1. 核心问题：后端返回列表，前端期望单个对象 #

• 你的Spring Boot Repository方法findByTicketId返回的是List<FlightTicketDto>，所以后端API返回的是一个JSON数组（比如 [{ticket_id:443, ...}]）。
• 但你的Angular服务FlightTicketService里的fetchEmpDeptDataInnerJoin方法，用http.get<FlightTicket>声明要接收单个FlightTicket对象，这就导致前端把数组当成了单个对象来处理。
• 当你在组件里把这个数组赋值给flightTicket后，模板里访问flightTicket.destinationDate等属性时，因为数组本身没有这些属性，所以所有值都是undefined，页面自然显示为空。

2. 两种解决方案（选其一即可） #

方案一：调整后端，返回单个对象（推荐，因为ticket_id应该是唯一主键） #

既然ticket_id是唯一标识，你的Repository方法没必要返回列表，直接返回单个对象更合理：

// 修改FlightTicketRepository
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")
    FlightTicketDto findByTicketId(Integer ticket_id); // 去掉List<>
}

然后修改Controller的返回类型：

@GetMapping("/mytickets/{ticket_id}")
public FlightTicketDto fetchEmpDeptDataInnerJoin(@PathVariable Integer ticket_id) { // 返回单个对象
    return flightTicketRepository.findByTicketId(ticket_id);
}

这样后端会返回单个JSON对象，和你当前前端代码的期望完全匹配，不需要修改任何Angular代码就能正常显示。

方案二：调整前端，接收数组并取第一个元素 #

如果暂时不想修改后端，那就调整Angular代码来适配数组返回：

• 首先修改服务层的返回类型：

// FlightTicketService.ts
fetchEmpDeptDataInnerJoin(ticket_id: number): Observable<FlightTicket[]> { // 改成数组类型
    return this.http.get<FlightTicket[]>(`${this.baseUrl}/${ticket_id}`);
}

• 然后在组件订阅时，取数组的第一个元素（因为ticket_id唯一，结果应该只有一条）：

// myticketslist-component.ts
reloadData() {
    this.flightTicketService.fetchEmpDeptDataInnerJoin(this.ticket_id).
    subscribe((response) => {
        this.flightTicket = response[0]; // 取数组第一个元素赋值
    });
}

这样就能正确拿到单个对象的属性，模板也能正常渲染内容了。

额外检查点 #

• 可以打开浏览器的开发者工具（F12），查看Network标签里的API请求，确认后端返回的是数组还是单个对象，这能帮你快速验证问题。
• 如果日期显示有问题，可能需要处理后端返回的日期格式（比如ISO字符串转成Angular友好的Date类型），不过这是后续优化的问题，当前先解决数据匹配的核心问题。

内容的提问来源于stack exchange，提问作者Viola