[解決済み] mat-radio-button のデフォルトの選択状態を、angular2 を使って mat-radio-group の中に設定する

質問

私のアンギュラーアプリでこの問題が発生しました。mat-radio-groupに多くのオプションがありますが、これらはjsonオブジェクトに従って動的に配置されています。このようなものです。

これはjsonオブジェクトです。

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

この例では、リストには2つのオブジェクトしかありませんが、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オブジェクトがあります。

常に最初のオブジェクトを選択するようにするには？

解決方法は？

を追加します。 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>