在带有angular2的mat单选按钮组中，设置mat单选按钮默认选中

我在angular应用程序中遇到了这个问题。我在mat无线电组中有许多选项，但这些选项是根据json对象动态放置的。大概是这样的：

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

这是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>

{{op.name}}

listooptions

变量包含JSON对象

---

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

在JSON中添加一个

选中的
属性

{
  "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>


{{op.name}}
使用
[value]=“op.name”
并绑定到组件变量，如
[（ngModel）]=“chosenItem”

HTML:

将
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>



这将检查第一个单选按钮。
我也有这个问题。我使用的是angular material 7，我尝试使用[checked]=“I==0”，但由于某种原因，它不起作用。我还尝试向名为isDefault的JSON对象添加一个新的布尔字段，然后使用[checked]=“obj.isDefault”，但没有结果。
最后，我通过设置OnInit方法的默认值最终解决了这个问题。
我知道这意味着更多的代码，但正是它为我解决了这个问题

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

如果要更改选中值，则还可以动态设置它

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


对
对于那些仍在寻找正确答案的人，我将遵循以下文档：
在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:

为了完成该示例-从另一个组件启动无线电btn测试，请如下所示：

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


上述内容在此次stackblitz中不起作用。获取此错误：“ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。上一个值：“mat radio checked:true”。当前值：“mat radio checked:false”。这是正确答案。在角度上，选中/选定项由其等于的值决定。在这种情况下，将component（model）中的值设置为ngmodel绑定变量的所需值。
<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>

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

.example-radio-button {
  margin: 5px;
}

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