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

【问题标题】：How to set default checked value for RadioButton in Angular using *ngFor如何使用 *ngFor 在 Angular 中设置 RadioButton 的默认选中值
【发布时间】：2021-04-25 12:56:24
【问题描述】：

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

我怎样才能将一个字段设置为选中而其他字段不选中？

我正在使用 *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;
  }
}
}

【问题讨论】：

[checked]="indexOfElement == 0" 但仍然无法正常工作..

标签： angular angular-forms

【解决方案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>

【讨论】：

它在不应用 ngModel 时工作，但当我应用 ngModel 时它不工作。我应该为 ngModel 做什么替换

【解决方案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 实现，如下所示

Set a dynamic property in ngModel inside ngFor, with Angular 2

【讨论】：

同意你的观点，但仍然没有检查我的第一个输入你能检查我的代码.. 它有什么问题吗？ ——
它在不应用 ngModel 时工作，但当我应用 ngModel 时它不工作
好的，那是因为您对所有输入字段都使用相同的 ngModel 所以..
@nirazv，更新了答案，请检查。在另一种方式中，您还可以使用带有输入的点击事件并从那里捕获数据..

【解决方案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];

【讨论】：