在Angular 8中,下拉选项在页面加载时未显示选中项的问题可能是由于异步加载数据导致的。要解决这个问题,可以采取以下步骤:
在组件中定义一个变量来存储下拉选项的数据和选中项的值。例如,使用一个数组来存储下拉选项,一个变量来存储选中项的值。
options: any[] = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' }
];
selectedOption: any;
在组件的ngOnInit生命周期钩子函数中,使用异步操作从服务器加载数据,并将选中项的值赋给selectedOption变量。
ngOnInit() {
// 异步加载数据
this.loadData().subscribe(data => {
// 设置选中项的值
this.selectedOption = data.selectedOption;
});
}
loadData(): Observable {
// 模拟异步加载数据
return of({ selectedOption: { id: 2, name: 'Option 2' } }).pipe(delay(1000));
}
在HTML模板中,使用ngModel绑定selectedOption变量来实现下拉选项的选中。
通过以上步骤,下拉选项在页面加载时应该会显示选中项。在loadData()函数中,你可以替换为实际的异步操作,如从服务器获取数据。在这个例子中,使用of()函数和delay()操作符来模拟异步加载数据的延迟。确保在异步加载数据完成后,设置选中项的值。