如何在 Angular 中打印一条 MySql 记录的数据

Posted 2023-02-27

【中文标题】如何在 Angular 中打印一条 MySql 记录的数据

【英文标题】：How to print data for one MySqL record in Angular

【发布时间】：2019-05-23 15:42:55

【问题描述】：

我的 mysql 数据库中有一个表 flight：

我只想在我的 Spring Boot 应用程序中显示带有flight_id=1 的第一条记录

这是我的json

myflights-list.component.html:

<h3>Ticket</h3>

<div *ngIf="flight">
<div>
<label>departureCity: </label> flight.departureCity
</div>
<div>
<label>destinationCity: </label> flight.destinationCity
</div>
<div>
<label>price: </label> flight.price
</div>
<div>
<label>flightDuration: </label> flight.flightDuration
</div>
<div>
<label>transferNumber: </label> flight.transferNumber
</div>
<div>
<label>departureDate: </label> flight.departureDate
</div>
<div>
<label>departureTime: </label> flight.departureTime
</div>

<hr/>
</div>

myflights-list.component.ts

@Component(
 selector: 'myflights-list',
 templateUrl: './myflights-list.component.html',
 styleUrls: ['./myflights-list.component.css']
)
export class MyflightsListComponent implements OnInit 

flight: Flight = new Flight();
flights: Observable<Flight>;
flight_id: number;
constructor(private flightService: FlightService,
          private router: Router, private route: ActivatedRoute, private token: TokenStorageService)  

ngOnInit() 
  ngOnInit() 
 /*  this.flight_id = 1;*/
 this.route.params.subscribe(params =>  this.flight_id = params['flight_id']; );
 this.flightService.getFlight(this.flight_id).subscribe(t => this.flight = t);
 this.flight_id = this.flight.flight_id;
 this.reloadData();

this.reloadData();


reloadData() 
this.flights = this.flightService.getFlight(this.flight_id);

flight.ts

export class Flight 
flight_id: number;
departureCity: string;
destinationCity: string;
price: number;
flightDuration: number;
transferNumber: number;
departureDate: Date;
departureTime: Time;
tickets: Ticket[];

export class Ticket 
ticket_id: number;
place: number;
user_id: number;
flight_id: number;

flight.service.ts

import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';
import Observable from 'rxjs';
import Flight from './flight';

@Injectable(
providedIn: 'root'
)
export class FlightService 

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

constructor(private http: HttpClient) 


getFlight(flight_id: number): Observable<Flight> 
return this.http.get<Flight>(`$this.baseUrl/$flight_id`);

在我的 Spring Boot 中，它看起来像图片上的那样。很遗憾，我的 flight_id=1 航班没有数据

【参考方案1】：

两种方式：

您是否必须直接订阅您的服务才能获取您的数据：

 this.flightService.getFlight(this.flight_id).subscribe((response) => 

      this.flight = response;

    );
  

---

或者，正如您打算使用 flights Observable 所做的那样，也订阅：

reloadData() 

  this.flights = this.flightService.getFlight(this.flight_id);

  this.flights.subscribe((response) => 

     this.flight = response;

    );
  

【讨论】：

谢谢，它有效。能否也帮我从地址路径中获取flight_id，不像我写的this.flight_id = 1;

@Viola 是的，欢迎您，您是在使用角度路由，还是尚未实现？

请看我的myflights-list.component.ts 课程，我试过了，但它不起作用

@Viola，还不够，你的路由配置在哪里？

我不知道应该添加什么

【参考方案2】：

需要订阅getFlight方法。

reloadData() 
 this.flightService.getFlight(this.flight_id).subscribe((data) => 

   this.flights = data
  );