我有一个数据库表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();
}
}
最佳答案
由于您将 airlines
变量声明为 Observable,因此在模板中引用它时需要这样处理。
改变你的ngFor
:
*ngFor="let airline of airlines"
为此:
*ngFor="let airline of (airlines | async)"
关于html - 如何在 Angular 中显示下拉列表以从 MySQL 表中选择一项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53970701/