在Angular中,如果下拉菜单的选定值未显示,可能是由于以下原因:
检查表单控件的绑定值是否正确。确保绑定的值与下拉菜单中的选项值匹配。
确保在组件中正确设置了下拉菜单的选定值。可以使用ngModel或formControl来设置选定值。
下面是一个示例代码,展示了如何解决下拉菜单未显示选定值的问题:
组件模板文件(component.html):
组件文件(component.ts):
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
dropdownOptions = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' }
];
ngOnInit() {
this.myForm = new FormGroup({
myDropdown: new FormControl('2') // 设置初始选定值为 '2'
});
}
}
在上面的示例中,使用formGroup和formControlName来创建响应式表单,并设置初始选定值为'2'。确保dropdownOptions中的value值与初始选定值匹配。
通过检查绑定值和设置初始选定值,应该能够解决下拉菜单未显示选定值的问题。