使用 angular2 在 mat-radio-group 中设置默认选择的 mat-radio-button

Posted 2023-03-05

【中文标题】使用 angular2 在 mat-radio-group 中设置默认选择的 mat-radio-button

【英文标题】：Set mat-radio-button default selected in a mat-radio-group with angular2

【发布时间】：2018-08-07 09:40:44

【问题描述】：

我在我的 Angular 应用程序中遇到了这个问题。我在 mat-radio-group 中有很多选项，但这些选项是根据 json 对象动态放置的。像这样的：

这是json对象

  "list": [
    "name": "some name 1", ID: "D1",
    "name": "some name 2", ID: "D2"
  ]

在此示例中，我的列表中只有两个对象，但可以是 9、20 或任意数量的对象。

所以我希望在我的 html 中，无论有多少对象，只有第一个被选中，即使列表更改只是第一个对象保持选中状态。

这是我的html：

<mat-radio-group name="opList"  fxLayout="column">
  <mat-radio-button *ngFor="let op of listOfOptions"  name="opList" > op.name</mat-radio-button>
</mat-radio-group>

listOfOptions 变量具有 JSON 对象。

如何始终设置选中的第一个对象？

【参考方案1】：

在 JSON 中添加 checked 属性

  "list": [
    "name": "some name 1", ID: "D1", "checked": true,
    "name": "some name 2", ID: "D2", "checked": false
  ]

然后

    <mat-radio-group name="opList"  fxLayout="column">
      <mat-radio-button *ngFor="let op of listOfOptions" 
      [checked]="op.checked" name="opList" > op.name</mat-radio-button>
    </mat-radio-group>

【讨论】：

以上内容在这个 stackblitz 中不起作用。 stackblitz.com/edit/… 收到此错误：“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'mat-radio-checked: true'。当前值：'mat-radio-checked: false'。”

【参考方案2】：

使用[value]="op.name" 并绑定到您的组件变量，例如[(ngModel)]="chosenItem"

HTML：

<mat-radio-group name="opList"  fxLayout="column" [(ngModel)]="chosenItem">
      <mat-radio-button *ngFor="let op of list" [value]="op.name" name="opList" > op.name</mat-radio-button>
  </mat-radio-group>

在您的组件中：

list = [
     "name": "some name 1", ID: "D1",
     "name": "some name 2", ID: "D2"
]
chosenItem = this.list[0].name;

【讨论】：

这是正确的答案。在角度中，选中/选定的项目由它等于的值决定。在这种情况下，将组件（模型）中的值设置为 ngmodel 绑定变量所需的值。

【参考方案3】：

将let i = index 添加到*ngFor，然后将[value] 和[checked] 挂钩。

<mat-radio-group>
  <mat-radio-button *ngFor="let o of options; let i = index" [value]="i" [checked]="i === 0">
<mat-radio-group>

这将检查第一个单选按钮。

【参考方案4】：

我也有这个问题。我使用的是角度材料 7，我尝试使用 [checked]="i==0" 但由于某种原因，它不起作用。我还尝试向名为 isDefault 的 JSON 对象添加一个新的布尔字段，然后使用 [checked]="obj.isDefault" 没有结果。 最后，我终于通过在 OnInit 方法中设置默认值来解决它。 我知道这意味着更多的代码，但它为我解决了它。

here you can see an example

【参考方案5】：

您可以将 [checked]='true' 与 HTML 中的第一个单选按钮一起使用。

如果你想改变检查值，你也可以动态设置它。

 <mat-radio-group >
     <mat-radio-button [checked]='true'>yes </mat-radio-button>
</mat-radio-group>

【参考方案6】：

对于那些仍在寻找正确答案的人，我会关注文档：here 在 ngOnInit() 处添加一点：

然后它去了 - TS：

import Component, OnInit from '@angular/core';


@Component(
  selector: 'radio-btns-test',
  templateUrl: 'radio-btns-test.html',
  styleUrls: ['radio-btns-test.css'],
)
export class RadioBtnsTest implements OnInit 
                             // data source for the radio buttons:
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];

                             // selected item
  favoriteSeason: string;

                             // to dynamically (by code) select item
                             // from the calling component add:
  @Input() selectSeason: string;



  ngOnInit() 
                             // To have a default radio button checked
                             // at the page loading time (fixed solution)
      this.favoriteSeason = 'Summer';

                             // OR  (do only one)
                             // To dynamically (by code) select item
                             // from the calling component add:
      this.favoriteSeason = this.selectSeason;
  

HTML：

<label id="example-radio-group-label">Pick your favorite season</label>

<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="favoriteSeason">

  <mat-radio-button 
       class="example-radio-button" 
       *ngFor="let season of seasons" 
       [value]="season">
    season
  </mat-radio-button>

</mat-radio-group>

<div>Your favorite season is: favoriteSeason</div>

CSS

.example-radio-group 
  display: flex;
  flex-direction: column;
  margin: 15px 0;


.example-radio-button 
  margin: 5px;

为了完成示例 - 从另一个组件启动 radio-btn-test，这样调用它：

<radio-btns-test [selectSeason]="'Summer'"></radio-btns-test>

【讨论】：

它给了我一个指导方针。我使用数字作为值，但它不起作用。我把它改成了一个字符串，它起作用了。谢谢

【参考方案7】：

使用checked 属性为true 设置单选按钮选择为默认。

示例：

<mat-radio-group>
     <mat-radio-button [checked]="true"> Yes </mat-radio-button>
     <mat-radio-button> No </mat-radio-button>
</mat-radio-group>