Angular2 -如何知道在Angular2应用程序中选择了哪个单选按钮

在Angular2应用程序中，要知道用户选择了哪个单选按钮，可以通过以下步骤实现：

基础概念

单选按钮（Radio Button）是一种用户界面元素，允许用户从一组选项中选择一个选项。在Angular中，单选按钮通常与表单控件一起使用，以便于数据绑定和验证。

类型与应用场景

基本单选按钮：用于简单的选择场景。
分组单选按钮：通过相同的name属性将多个单选按钮分组，确保同一时间只能选中一个。
动态生成的单选按钮：适用于选项数量不固定或需要从服务器动态加载的场景。

实现方法

以下是一个简单的示例，展示如何在Angular2应用程序中使用单选按钮，并获取用户的选择。

HTML模板

<form [formGroup]="radioForm">
  <div *ngFor="let option of options; let i = index">
    <input type="radio" [value]="option.value" formControlName="selectedOption" (change)="onRadioChange($event)">
    <label>{{ option.label }}</label>
  </div>
</form>

组件类

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-radio-buttons',
  templateUrl: './radio-buttons.component.html',
  styleUrls: ['./radio-buttons.component.css']
})
export class RadioButtonsComponent {
  radioForm: FormGroup;
  options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' }
  ];

  constructor(private fb: FormBuilder) {
    this.radioForm = this.fb.group({
      selectedOption: ''
    });
  }

  onRadioChange(event: any) {
    console.log('Selected value:', event.target.value);
  }
}