Как показать выпадающий список в Angular, чтобы выбрать один элемент из таблицы MySQL?

Question

У меня в таблице базы данных airline, и я хочу показать в drop down list все данные из таблицы, а затем иметь возможность выбрать один элемент из списка.

моей таблицы

aviation.ts

export class Airline {
 airline_id: number;
 name: string;
 symbol: string;
}

Мой HTML-код, но он не работает (отображается только выпадающий список без данных внутри):

<mat-form-field>
<mat-select placeholder="Airlines" [(ngModel)]="selectedValue" name="airline">
  <mat-option *ngFor="let airline of airlines" [value]="airline.name">
    {{airline.symbol}}
  </mat-option>
</mat-select>
</mat-form-field>

На самом деле это выглядит так (без данных в списке):

AirlinesService.ts

export class AirlineService {

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

 constructor(private http: HttpClient) {
}

 getAirline(airline_id: number): Observable<Airline> {
 return this.http.get<Airline>(`${this.baseUrl}/${airline_id}`);
}

 getAirlinesList(): Observable<any> {
 return this.http.get(`${this.baseUrl}`);
}
}

Airlines-list.component.ts

export class AirlinesListComponent implements OnInit {

airlines: Observable<Airline[]>;
airline_id: number;
selectedValue: string;

@Input() airline: Airline;

constructor(private airlineService: AirlineService) { }

ngOnInit() {
this.reloadData();
}

reloadData() {
this.airlines = this.airlineService.getAirlinesList();
}

Answer 1

Поскольку вы объявили переменную airlines как Наблюдаемую, вам нужно обращаться с ней так же, как с ссылкой на нее в шаблоне.

Измените ngFor из этого:

*ngFor="let airline of airlines"

к этому:

*ngFor="let airline of (airlines | async)"