Angular中*ngFor生成的Fluent单选组如何获取各分类选中值？

方案一：双向绑定 + 对象存储选中状态 #

这是最简洁的实现方式，利用Angular的ngModel双向绑定，自动同步每个单选组的选中值到组件内的状态对象，完全不用手动操作DOM。

实现步骤： #

1. 组件类定义状态容器
   创建一个键值对对象，用分类名称作为键，存储对应单选组的选中值：

   categories: string[] = ['category_1', 'category_2', 'category_n'];
   options: string[] = ['option_1', 'option_2', 'option_n'];
   // 存储每个分类的选中值
   selectedValues: { [key: string]: string } = {};
   
   some_function() {
     // 直接获取所有分类的选中值
     console.log(this.selectedValues);
     // 单独获取某分类的值：this.selectedValues['category_1']
   }
   

2. 修正模板代码并绑定状态
   先修正你代码里的笔误（from改为of、*nfFor改为*ngFor），再通过ngModel绑定状态对象：

   <fluent-radio-group
     *ngFor="let category of categories"
     [(ngModel)]="selectedValues[category]"
     (change)="some_function()">
     <fluent-radio
       *ngFor="let option of options"
       [value]="option">
         {{ option }}
     </fluent-radio>
   </fluent-radio-group>
   

   此后每个单选组的选中变化都会自动同步到selectedValues，some_function里直接读取该对象即可。

方案二：响应式表单（Reactive Forms） #

如果你的场景涉及表单验证、复杂状态监听，推荐用Angular响应式表单，扩展性更强。

实现步骤： #

1. 导入依赖并初始化表单组
   先导入表单相关模块，再为每个分类创建对应的表单控件：

   import { Component } from '@angular/core';
   import { FormGroup, FormBuilder } from '@angular/forms';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourComponent {
     categories: string[] = ['category_1', 'category_2', 'category_n'];
     options: string[] = ['option_1', 'option_2', 'option_n'];
     categoryForm: FormGroup;
   
     constructor(private fb: FormBuilder) {
       // 循环生成每个分类对应的表单控件
       const formControls = this.categories.reduce((controls, category) => {
         controls[category] = ['']; // 设置默认值为空
         return controls;
       }, {} as { [key: string]: any });
       this.categoryForm = this.fb.group(formControls);
     }
   
     some_function() {
       // 获取所有分类的选中值
       console.log(this.categoryForm.value);
       // 单独获取某分类的值：this.categoryForm.get('category_1')?.value
     }
   }
   

2. 模板绑定表单控件
   将每个fluent-radio-group绑定到对应的表单控件：

   <form [formGroup]="categoryForm">
     <fluent-radio-group
       *ngFor="let category of categories"
       [formControlName]="category"
       (change)="some_function()">
       <fluent-radio
         *ngFor="let option of options"
         [value]="option">
           {{ option }}
       </fluent-radio>
     </fluent-radio-group>
   </form>
   

方案优势 #

• 无需操作DOM，避免ElementRef带来的耦合性和维护成本
• 状态集中管理，分类数量再多也能轻松获取每个组的选中值
• 符合Angular响应式编程理念，自动同步视图与数据

内容的提问来源于stack exchange，提问作者Phill981