如何在Angular中显示下拉列表以从MySQL表中选择一项？

Question

我在数据库表airline中，我想在drop down list中显示表中的所有数据，然后能够从列表中选择一项。

我的桌子

airline.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>

实际上看起来像这样（列表中没有数据）：

airlineService.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变量声明为Observable，因此在模板中引用它时，您需要将其视为原样。

从此更改您的ngFor：

*ngFor="let airline of airlines"

对此：

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