在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 { }
这样,单选按钮的值属性应该能起作用了。