在Angular 7中,当选项被异步加载时,选择指令可能无法选择选项。为了解决这个问题,您可以使用ngModel
指令和ngModelChange
事件来手动选择选项。下面是一个示例代码:
在组件的HTML模板中,您可以使用ngModel
指令和ngModelChange
事件来监听选择的改变,并在选项加载完成后手动选择选项。示例代码如下:
在组件的Typescript文件中,您可以在选项加载完成后手动选择选项。示例代码如下:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
options: string[]; // 异步加载的选项
selectedOption: string; // 选择的选项
ngOnInit() {
// 模拟异步加载选项
setTimeout(() => {
this.options = ['Option 1', 'Option 2', 'Option 3'];
// 如果选项已经被选择,则手动选择选项
if (this.selectedOption) {
this.onOptionSelected(this.selectedOption);
}
}, 2000);
}
onOptionSelected(option: string) {
// 手动选择选项
this.selectedOption = option;
}
}
在上述示例中,options
是异步加载的选项数组,selectedOption
是选择的选项。在ngOnInit
生命周期钩子中,我们使用setTimeout
模拟异步加载选项,并在选项加载完成后手动选择选项。在onOptionSelected
方法中,我们手动选择选项。
请注意,上述示例中的代码是基于Angular 7的。如果您使用的是其他版本的Angular,可能需要根据您的版本进行适当的调整。