角度：无线电输入"checked"属性未按预期工作

Question

在下面显示的代码中，

我正在迭代视图中显示为单选按钮deliveryMethods。我打算预先选择第一个单选按钮。

我应用了以下属性：

[checked]="ndx==0"

其中ndx是每次迭代的索引。但是没有选中任何单选按钮。

如何动态预选第一个单选按钮？

<div *ngFor="let dm of deliveryMethods; let ndx=index">
<label class="form-check-label">
<input class="form-check-input f-s-1pt2" type="radio" 
name="dm.name" 
value="{{dm.name}}" 
[(ngModel)]="item.item.deliveryMethod"
(change)="filterProducts(item)"
[checked]="ndx==0"
class="radio-dimension"> 
{{dm.label}}
</label>
</div>

Answer 1

我已经删除了[(ngModel)]并使用带有[value]的属性绑定将值绑定到单选按钮控件。下面的代码对我有用

<div *ngFor="let dm of deliveryMethods; let ndx = index">
<label class="form-check-label">
<input class="form-check-input f-s-1pt2" type="radio" 
name="dm.name" 
[value]="dm.name"
(change)="filterProducts(item)"
[checked]="ndx === 0"
class="radio-dimension"> 
{{dm.label}}
</label> 
</div>

这是一个工作弹道机 https://plnkr.co/edit/6Ay2zr7Ow3csB5Pxdgdz?p=preview

Answer 2

如果您想保留[(ngModel)]而不删除它，只需使用以下语法angular

<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
#is_public="ngModel" name="is_public" [(ngModel)]="updateGroupData.is_public" [value]="1">

请记住使用[value]进行数据绑定。

或

将其与true一起使用false

<input class="form-check-input" type="radio" id="flexRadioDefault2" #is_public="ngModel" name="is_public [(ngModel)]="groupFormData.is_public" [value]="false">

请记住，使用[value]="true"或[value]="false"进行数据绑定。