Как напечатать данные для одной записи MySqL в Angular

Question

У меня есть таблица flight в моей базе данных MySqL:

Я хочу показать в своем приложении 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 Наблюдаемый, подписывайтесь также:

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
  });
}}