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

Question

我的 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 航班没有数据

Answer 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;

    });
  }}
}}

Answer 2

需要订阅getFlight方法。

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

   this.flights = data
  });
}}