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

Question

我在我的 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 对象。

如何设置总是选中第一个对象？

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