Question

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

Answer 1

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

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

以下是工作示例：https://stackblitz.com/edit/angular-nxuucw?file=app%2Fradio-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>

默认情况下，从动态提取的单选按钮列表中选择单选按钮

2 个答案: