Установить mat-radio-button default, выбранный в mat-radio-group с angular2

Добавьте свойство checked в 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>

Используйте [value]="op.name" и сделайте привязку к вашей переменной Component, например [(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;

Добавьте 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>

Это проверит самую первую радиокнопку.

Для тех, кто все еще ищет правильный ответ, я буду следовать документации: здесь с одним небольшим дополнением в ngOnInit ():

и идет - ТС:

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>

Вы можете использовать [checked] = 'true' с первым переключателем в HTML.

Если вы хотите изменить отмеченное значение, вы также можете установить его динамически.

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

У меня тоже была эта пробема. Я использовал угловой материал 7 и пробовал с [checked] = "i == 0", но по какой-то причине это не сработало. Я также попытался добавить новое логическое поле к моему объекту JSON с именем isDefault, а затем безрезультатно использовал [checked] = "obj.isDefault". В конце концов, я наконец решил это, установив значение по умолчанию из метода OnInit. Я знаю, что это означает немного больше кода, но это то, что разрешило это для меня.

здесь вы можете увидеть пример

Используйте checked is true для установки значения переключателя материала выбрано по умолчанию.

Пример:

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