要创建一个带有Id的动态单选按钮列表,可以按照以下步骤进行操作:
dynamic-radio-buttons
的组件:ng generate component dynamic-radio-buttons
dynamic-radio-buttons.component.ts
文件中,定义一个名为radioOptions
的数组,用于存储单选按钮的选项:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dynamic-radio-buttons',
templateUrl: './dynamic-radio-buttons.component.html',
styleUrls: ['./dynamic-radio-buttons.component.css']
})
export class DynamicRadioButtonsComponent implements OnInit {
radioOptions = [
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2' },
{ id: 3, label: 'Option 3' }
];
constructor() { }
ngOnInit() {
}
}
dynamic-radio-buttons.component.html
文件中,使用*ngFor
指令遍历radioOptions
数组,创建单选按钮列表,并将每个选项的id
和label
绑定到相应的属性和文本上:
DynamicRadioButtonsComponent
添加到模板中:
这样就创建了一个带有Id的动态单选按钮列表。