如何在Angular中循环单选按钮集

在Angular中循环单选按钮集可以通过以下步骤实现：

定义一个数组或从后端获取数据，用于存储单选按钮的选项和值。
在组件中使用 *ngFor 指令循环遍历数组，并为每个选项创建一个单选按钮。
使用 ngModel 指令绑定每个单选按钮的值到组件中的一个变量。
在组件中定义一个方法来处理单选按钮值的改变，并根据选择的值执行相应的逻辑。
在模板中为每个单选按钮设置一个唯一的 id，并使用 for 属性将标签与相应的 id 关联起来，以实现正确的关联效果。
可以根据需要设置默认选中的单选按钮，通过在组件中初始化变量的值或使用 [checked] 属性。
如果需要在用户选择时获取选中的值，可以通过 ngModelChange 事件监听值的变化，并调用相应的方法进行处理。

以下是一个示例代码：

组件部分：

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button',
  template: `
    <div *ngFor="let option of options">
      <input type="radio" [id]="option.id" [value]="option.value" [(ngModel)]="selectedOption" (ngModelChange)="handleSelectionChange()">
      <label [for]="option.id">{{ option.label }}</label>
    </div>
    <p>选中的值: {{ selectedOption }}</p>
  `,
})
export class RadioButtonComponent {
  options = [
    { id: 'option1', value: 'option1', label: '选项1' },
    { id: 'option2', value: 'option2', label: '选项2' },
    { id: 'option3', value: 'option3', label: '选项3' },
  ];
  selectedOption: string;

  handleSelectionChange() {
    // 处理选中值的逻辑
    console.log(this.selectedOption);
  }
}

在模板中使用该组件：