在带有Angular2的MAT-RADIO组中选择的设置MAT-RADIO-BUTTON默认值

Question

我在Angular应用程序中遇到了这个问题。我在MAT-RADIO组中有很多选择，但是根据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>

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

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

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

Answer 4

使用 checked属性作为 true，以将选择为 default 。。。

示例：

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

Answer 5

您可以使用html中的第一个无线电按钮使用[检查] ='true'。

如果要更改检查值，以便也可以动态设置它。

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

Answer 6

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

完成示例 - 从另一个组件开始进行无线电-BTN检验的启动，以下是这样：

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

Answer 7

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

在这里您可以看到一个示例

Answer 8

如果您使用的是反应性表格，则需要通过"setValue"方法来执行此操作，因为[(ngModel)]用反应性形式不建议。代码示例：

html：

<ng-container [formGroup]="appForm">
  <mat-radio-group formControlName="agreement" aria-label="Select an option">
    <mat-radio-button *ngFor="let option of agreementOptions" [value]="option.id">
      {{ option.value }}
    </mat-radio-button>
  </mat-radio-group>
</ng-container>

ts：

export class ExampleComponent implements OnInit {
  appForm = this.fb.group({
    agreement: undefined,
  });
  agreementOptions = [
    { id: 0, value: 'No' },
    { id: 1, value: 'Yes' },
  ];
  constructor(private fb: FormBuilder) {}
  get agreementControl(): FormControl {
    return this.appForm.get('agreement') as FormControl;
  }
  ngOnInit() {
    this.setDeafultFormValues();
  }
  setDeafultFormValues(): void {
    this.agreementControl.setValue(1);
  }
}

和更多扩展演示。