如何在Angular中使用*ngFor设置RadioButton的默认选中值

Question

我正在迭代基于数组长度的单选按钮列表，并希望将checked设置为仅为第一个元素/输入字段的默认值

如何设置只有一个字段为选中，其余字段为未选中?

我使用*ngFor来迭代项目ngModel用于双向数据绑定

<div class="pt-3 flex flex-nowrap">
<div *ngFor="let color of colors" class="mr-2">
<input id="{{color}}" type="radio" [(ngModel)]="getColor" value="{{color}}"  [defaultChecked]="getChecked()" name="radio" class="hidden" />
<label class="mr-2 items-center flex border-2 border-white" for="{{color}}">
<div class="h-5 w-5 bg-{{color}}-500 m-0.5"></div>
</label>
</div>
</div>

这是我的组件

export class AppComponent {
colors = ['red', 'green', 'blue'];
getColor = 'gray';
private isChecked = false;
getChecked(): boolean {
if (!this.isChecked) {
this.isChecked = true;
return this.isChecked;
}
}
}

Answer 1

*ngFor提供基于这个索引，你可以像下面这样设置默认选择:

<div class="pt-3 flex flex-nowrap">
<div *ngFor="let color of colors; let idx = index" class="mr-2">
<input id="{{color}}" type="radio" [(ngModel)]="getColor" [checked]="(idx === 0)" value="{{color}}" name="radio" class="hidden" />
<label class="mr-2 items-center flex border-2 border-white" for="{{color}}">
<div class="h-5 w-5 bg-{{color}}-500 m-0.5"></div>
</label>
</div>
</div>

Answer 2

试一试，

删除defaultChecked属性，因为我们需要使用checked属性。

<div class="pt-3 flex flex-nowrap">
<div *ngFor="let color of colors; let i = index" class="mr-2">
<input id="{{color}}" type="radio" [(ngModel)]="getColor" value="{{color}}"  [checked]="i == 0" name="radio" class="hidden" />
<label class="mr-2 items-center flex border-2 border-white" for="{{color}}">
<div class="h-5 w-5 bg-{{color}}-500 m-0.5"></div>
</label>
</div>
</div>

尝试删除ngModel(如果不需要捕获输入数据)或为ngFor使用动态ngModel实现像下面的

• 在ngFor内的ngModel中设置一个动态属性，使用Angular 2

Answer 3

经过多次研究，我终于找到了答案。因为这里我使用的是双向数据绑定(ngModel)，所以我们需要为关联的选择器设置默认值。

[(ngModel)] ="selectedColor">

<div *ngFor="let color of colors" class="mr-2">
<input 
[(ngModel)]="selectedColor" 
id="{{color}}" type="radio"
value="{{color}}"
name="radio"
class="hidden" />
</div>

。ts组件

colors = ['red', 'green', 'blue', 'yellow', 'purple'];
selectedColor = this.colors[0];

Answer 4

1. 复选框的checked属性应该默认在[your.component.ts]
中声明
2. 在模板中使用checked属性

演示