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

Question

我有一个数据库表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)"