默认情况下，从一个动态获取的广播按钮列表中选择一个单选按钮

Question

Angular 5

i是动态从数组中填充单个按钮组，并希望默认选择第一个单选按钮。我可以使用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>

Answer 1

scheduleEvent通过[(ngModel)]绑定，因此您可以更改模型，并且视图也将更新。您默认可以选择任何项目，例如：

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

这是工作示例：https：//stackblitz.com/edit/angular-nxuucw?file=pp/radio-ng-model-example.ts

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