Angular：无线电输入的“已检查”属性未按预期工作

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>

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