如何在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}`);
    }
}

航空公司,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)"