Question

我正在使用角度材质2来创建UI。

我正在尝试使用来自后端的数据来显示单选按钮列表。我应该添加什么属性以确保一次只选择一个单选按钮？

这是我的代码

 <div class="col-md-12" style="margin: 20px 0px;">
     <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-group >
                     <mat-radio-button color="primary" [value]="content">{{content.name}} </mat-radio-button>
                 </mat-radio-group>
             </div>
         </mat-card>
     </div>
 </div>

Answer 1

无线电组的目的是控制所有单选按钮。即使没有数据模型对象，该组也只允许在任何时候选择一个单选按钮。在您的代码中，每个单选按钮都有自己的无线电组，因此可以选择所有单选按钮，因为每个按钮属于不同的组。将所有无线电组绑定到同一模型确实可以解决您的问题，但这不是使用无线电组的正确方法。您的代码看起来应该更像这样：

<mat-radio-group [(ngModel)]="favoriteSeason">
    <div class="col-md-12" style="margin: 20px 0px;">
        <div class="col-md-4 clearfix" *ngFor="let season of seasons" style="margin-top: 10px;">
            <mat-card>
                <div style="display: inline-block; margin-right: 10px;">
                    <button class="mat-mini-fab mat-primary avatar">
                        <mat-icon>{{season.icon}}</mat-icon>
                    </button>
                </div>
                <div style="display: inline-block">
                    <mat-radio-button color="primary" [value]="season.name">{{season.name}}</mat-radio-button>
                </div>
            </mat-card>
        </div>
    </div>
</mat-radio-group>

编辑：重点是所有的单选按钮都需要在一个单一的无线电组中。

Answer 2

我找到了答案。它可以通过使用双向绑定来完成。我已添加 [（ngModel）] =“selectedContent（可以是任何名称）”以解决此问题。

 <mat-radio-group  [(ngModel)]="selectedContent">
       <mat-radio-button color="primary" [value]="content">{{content.name}}</mat-radio-button>
  </mat-radio-group>

Answer 3

这解决了我的问题（这两个组的名称与HTML中的名称相同/相同）name="what_ever_you_want"

<div class="question">
  <mat-radio-group class="custom-radio-group" aria-label="Select an option" name="single_img_radio">
    <mat-radio-button color="primary" value="yes">Yes</mat-radio-button>
  </mat-radio-group>
</div>

<div class="question">
  <mat-radio-group class="custom-radio-group" aria-label="Select an option" name="single_img_radio">
    <mat-radio-button color="primary" value="no">No</mat-radio-button>
  </mat-radio-group>
</div>

无法使用角度材料2一次仅选择一个单选按钮

3 个答案: