在Angular中,单选按钮的值属性应该使用ngModel
来绑定,而不是直接使用value
属性。以下是解决这个问题的一种方式:
HTML模板:
{{ option.label }}
组件:
export class AppComponent {
options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
];
selectedOption: string;
}
在上述代码中,ngModel
指令用于双向绑定selectedOption
属性和单选按钮的值。当用户选择一个选项时,selectedOption
的值将更新。
请确保使用了FormsModule
模块,以便使用ngModel
指令。在app.module.ts
中,添加以下导入语句:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports
FormsModule
],
// other configurations
})
export class AppModule { }
这样,单选按钮的值属性应该能起作用了。