默认情况下从动态获取的单选按钮列表中选择单选按钮答案

【问题标题】：Selecting a radio button by default from a list of radio buttons being fetched dynamically默认情况下从动态获取的单选按钮列表中选择单选按钮
【发布时间】：2018-09-04 07:10:07
【问题描述】：

角度 5

我正在动态地从数组中填充一个单选按钮组，并希望默认选择第一个单选按钮。我可以通过使用ngIf...then 构造来做到这一点吗？如果是这样，怎么做？

此外，也欢迎任何其他解决方案。

编辑：我当前的实现不起作用：

<mat-radio-group class="example-radio-group" [(ngModel)]="scheduleEvent" name="schedule" #rg1 ng-checked="">
  <mat-radio-button class="example-radio-button" style="margin-right:10px;" *ngFor="let schedule of schedules; let idx=index"
                    [value]="schedule" (change)="onSelectionChanged(idx)" *ngIf="idx===0 then selectButtonBlock">
      <ng-template #selectButtonBlock *ng-checked="true"></ng-template>
      {{schedule}}
  </mat-radio-button>
</mat-radio-group>

【问题讨论】：

我可以为我发布的代码添加我目前遇到的错误，但我什至不确定这个实现是否是正确的方法 - 所以我不想要成为焦点解决方案
就在您订阅获取 scheludes 时，为 scheleEvent 赋值：“this.scheleEvent=this.shedules[0]”。
您能提供您的单选按钮数组吗？

标签： angular dynamic radio-button angular-ng-if

【解决方案1】：

scheduleEvent 是通过[(ngModel)] 绑定的，所以你可以改变模型，视图也会更新。您可以默认选择任何项目，例如，如下所示：

ngAfterViewInit() {
  this.scheduleEvent = this.schedules[0];
}

下面是工作示例：https://stackblitz.com/edit/angular-nxuucw?file=app%2Fradio-ng-model-example.ts

【讨论】：

【解决方案2】：

它非常简单。有一个名为checked 的属性，我们可以动态地将其设置为true。像这样的：

<mat-radio-group class="example-radio-group" [(ngModel)]="scheduleEvent" name="schedule" #rg1 ng-checked="">
  <mat-radio-button 
     class="example-radio-button" 
     style="margin-right:10px;" 
     *ngFor="let schedule of schedules; let idx=index"
     [value]="schedule" 
     (change)="onSelectionChanged(idx)" 
     [checked]="idx===0" // Add this line to your code
  >
     {{schedule}}
  </mat-radio-button>
</mat-radio-group>

【讨论】：