使用Angular Material 2实现单选按钮互斥，需添加什么属性？

这问题我之前开发Angular Material项目时也碰到过，核心问题出在你的单选按钮分组结构上！

你现在把<mat-radio-group>放在了*ngFor循环内部，这会导致每循环一次就创建一个独立的单选分组，每个<mat-radio-button>都属于不同的组，自然能同时选中多个。

解决步骤： #

1. 将<mat-radio-group>移到*ngFor循环的外面，作为所有单选按钮的父容器，确保它们同属一个分组
2. 给<mat-radio-group>绑定[(ngModel)]，用来跟踪和保存当前选中的值（这也是Angular表单双向绑定的常规操作）

修改后的代码示例： #

<div class="col-md-12" style="margin: 20px 0px;">
  <!-- 把mat-radio-group提到循环外面 -->
  <mat-radio-group [(ngModel)]="selectedContent">
    <div class="col-md-4 clearfix" *ngFor="let content of contents" style="margin-top: 10px;">
      <mat-card>
        <div style="display: inline-block; margin-right: 10px;">
          <button class="mat-mini-fab mat-primary avatar">
            <mat-icon>slideshow</mat-icon>
          </button>
        </div>
        <div style="display: inline-block">
          <mat-radio-button color="primary" [value]="content">
            {{content.name}}
          </mat-radio-button>
        </div>
      </mat-card>
    </div>
  </mat-radio-group>
</div>

组件类中需要添加的属性： #

在你的组件.ts文件里，定义一个用来存储选中项的属性：

// 根据你的content类型调整类型定义，比如换成你自定义的接口
selectedContent: any;

关键属性说明： #

• <mat-radio-group>：所有同组的单选按钮必须放在这个容器内，它会自动管理单选互斥逻辑
• [(ngModel)]：双向绑定选中的值，方便你在组件中获取或设置当前选中项
• [value]="content"：给每个单选按钮绑定对应的数据对象，选中后selectedContent就会等于当前的content对象

这样调整后，你就能实现同一时间仅选中一个单选按钮的效果了！

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