如何点击按钮将Mat Radio Group的单选按钮重置为默认值？

需求：使用Mat Radio Group和Mat Radio Button对游戏进行评分，选项为None、Good、Bad。点击“Apply Changes”按钮应用修改后，所有单选按钮需恢复为默认的None选项。

修改后的模板代码 #

<ng-container *ngFor="let s of sites">
  <div class="col-sm-12 col-md-5">
    {{s}}
  </div>
  <div class="col-sm-12 col-md-7">
    <mat-radio-group [(ngModel)]="gameRatings[s]">
      <mat-radio-button *ngFor="let o of options" [value]="o">
        {{o}}
      </mat-radio-button>
    </mat-radio-group>
  </div>
</ng-container>
<button (click)="resetRadio()">Apply Changes</button>

修改后的TypeScript代码 #

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

@Component({
  selector: 'app-rating-example',
  templateUrl: './rating-example.component.html',
  styleUrls: ['./rating-example.component.css']
})
export class RatingExampleComponent {
  sites: string[] = ['Tekken', 'Street Fighter', 'DBZ'];
  options: string[] = ['None', 'Good', 'Bad'];
  // 存储每个游戏的当前评分，初始化为默认的None
  gameRatings: {[key: string]: string} = {};

  constructor() {
    // 给每个游戏初始化默认评分
    this.sites.forEach(site => {
      this.gameRatings[site] = 'None';
    });
  }

  resetRadio(): void {
    // 重置所有游戏的评分为None
    this.sites.forEach(site => {
      this.gameRatings[site] = 'None';
    });
  }
}

关键改动说明 #

• 移除原模板中[checked]="j===0"的硬编码逻辑，改用**双向绑定[(ngModel)]**绑定到gameRatings[s]，实现选择状态与数据的实时同步
• 新增gameRatings对象，专门存储每个游戏的当前评分，初始化时统一设为'None'
• resetRadio方法通过遍历所有游戏，将对应评分值重置为'None'，自动触发单选按钮恢复默认选中状态

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