问题描述: 在Angular中,当在带有结果的表格中使用ngFor循环生成Select控件时,Select控件无法正常使用。
解决方法: 一种解决方法是使用ngModel指令来绑定每个Select控件的值。以下是一个示例代码:
在组件的HTML模板中:
{{ item.name }}
在组件的TS文件中:
export class AppComponent {
items = [
{ name: 'Item 1', selectedOption: '' },
{ name: 'Item 2', selectedOption: '' },
{ name: 'Item 3', selectedOption: '' }
];
options = ['Option 1', 'Option 2', 'Option 3'];
}
这个示例中,我们使用ngFor循环生成了一个表格,并在每一行的第二列生成了一个Select控件。通过使用ngModel指令,我们将每个Select控件的值绑定到对应的item对象的selectedOption属性上。
这样,每个Select控件都将独立地存储并更新它们的选中值,而不会相互干扰。
希望以上解决方法能够帮助到你!