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

Question

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

我怎样才能只设置一个字段为选中状态而其余的字段不选中？

我正在使用 *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 提供 index 并且基于该索引，您可以进行如下默认选择：

<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. 默认情况下，应在 [your.component.ts] 中声明所需复选框的选中属性
2. 在模板中使用 checked 属性

演示