Angular 8中使用mat-radio-button统计选中单选按钮数量的问题排查

我看了你的代码，问题出在对单选按钮（mat-radio-button）的状态跟踪逻辑上——单选按钮和复选框的工作机制完全不同：复选框可以单独控制每个选项的checked状态并绑定到数据源，但单选按钮是组级控制，每个单选组内只能选中一个选项，它的选中状态不会自动更新到你数据源里的flightcenter或helloword对象中，这就是你原来的计数逻辑失效的原因。

下面是修正后的完整实现：

1. 调整组件数据源与初始化逻辑 #

首先，我们需要给每个airlinenameid条目添加两个属性，用来存储对应单选组的选中值：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Form: FormGroup;
  airlineNameID: any[] = []; // 假设这是你的数据源
  counterFlight = 0;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.Form = this.fb.group({});
    // 初始化每个条目选中状态为null（未选中）
    this.airlineNameID.forEach(item => {
      item.selectedFlight = null;
      item.selectedHelloWord = null;
    });
  }
}

2. 修改模板中的单选组绑定 #

把原来的全局ngModel变量改成绑定到当前airlinenameid的专属属性，确保每个单选组的状态独立：

<!-- app.component.html -->
<form id="formData" [formGroup]="Form">
  <div class="flight-center" *ngFor="let airlinenameid of airlineNameID | searchfilter:value">
    <!-- FlightCenter 单选组 -->
    <div class="col-3">
      <p>FlightCenter</p>
      <mat-radio-group [(ngModel)]="airlinenameid.selectedFlight" 
                      [ngModelOptions]="{standalone: true}"
                      (ngModelChange)="countRadio()">
        <mat-radio-button *ngFor="let flightcenter of airlinenameid.flightCenter" 
                          [value]="flightcenter.value" 
                          name="flightDate-{{airlinenameid.id}}"> <!-- 注意：name要唯一，避免组冲突 -->
          {{flightcenter.name}}
        </mat-radio-button>
      </mat-radio-group>
    </div>

    <!-- HelloWord 单选组 -->
    <div class="col-3">
      <p>HelloWord</p>
      <mat-radio-group [(ngModel)]="airlinenameid.selectedHelloWord" 
                      [ngModelOptions]="{standalone: true}"
                      (ngModelChange)="countRadio()">
        <mat-radio-button *ngFor="let helloword of airlinenameid.HelloWord" 
                          [value]="helloword.value"
                          name="helloword-{{airlinenameid.id}}"> <!-- name唯一 -->
          {{helloword.name}}
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
</form>

注意：每个单选组的name属性必须唯一，我用airlinenameid.id拼接确保不会冲突，否则Angular会把所有同名的单选组当成同一个组处理。

3. 修正计数方法 #

现在我们可以直接通过每个条目的selectedFlight和selectedHelloWord属性判断是否选中，不需要依赖事件对象：

// app.component.ts
countRadio(): void {
  this.counterFlight = 0;
  this.airlineNameID.forEach(entry => {
    // 如果FlightCenter组选中了值，计数+1
    if (entry.selectedFlight !== null && entry.selectedFlight !== undefined) {
      this.counterFlight++;
    }
    // 如果HelloWord组选中了值，计数+1
    if (entry.selectedHelloWord !== null && entry.selectedHelloWord !== undefined) {
      this.counterFlight++;
    }
  });
  alert(`选中的单选按钮数量：${this.counterFlight}`);
}

关键逻辑说明 #

• 单选组的[(ngModel)]绑定的是选中选项的值，而不是单个按钮的checked状态，所以我们需要用每个条目的专属属性来存储这个值。
• 每次单选组的选中值变化时，触发countRadio()重新统计所有选中的组数量（因为每个单选组最多贡献1个选中数）。
• 原来的item['checked']判断完全无效，因为单选按钮不会自动把选中状态写入你的数据源对象中，这是和复选框的核心区别。

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