Forms 角度4单选按钮问题

我正在尝试从类别创建单选按钮列表。 类别是一组对象，如下所示：

[
    {
        _id: '58cfb65b2ad6426beec93231'
        label: 'Category name',
        checked: true
    }, {
        _id: '58cfb65b2ad6426beec93232'
        label: 'Category name 2',
        checked: false
    }
]

现在，我尝试呈现单选按钮列表，并希望通过选中值设置checked

<label *ngFor="let cat of categories">
    <input 
       type="radio" 
       name="category" 
       [checked]="cat.checked" 
       [(ngModel)]="selectedCategory" 
       [value]="cat._id"/>
    {{ cat.label[lang.code] }}
</label>

{{cat.label[lang.code]}

---

单选按钮均未选中，selectedCategory未定义。当我提交表单并检查值时，结果也是未定义的。。。有人知道我做错了什么吗？

因为您使用的是

[（ngModel）]

，所以您告诉Angular进行双向数据绑定

双向意味着从代码到标记，反之亦然。因此，当Angular创建单选按钮（标记）时，它将检查AppComponent是否具有

selectedCategory

属性，如果是，它将在值匹配的单选按钮上设置

checked

属性

这种行为在某种程度上会与设置

[checked]

属性相冲突：即使在创建时在单选按钮上设置了该属性，它也会在ngModel数据绑定遇到阻碍时立即重置

可能的解决方案

在

AppComponent

类中，仔细检查

selectedCategory

成员是否存在。 然后，将

selectedCategory

属性设置为所选类别的值

例如，在创建（或接收）类别时执行以下操作：

for (let c of categories){
    if(c.checked){
        this.selectedValue = c._id;
        break;
    }
}

并且，从标记中删除

[checked]

绑定。这就足够了：

<label *ngFor="let cat of categories">
    <input 
       type="radio" 
       name="category" 
       [(ngModel)]="selectedCategory" 
       [value]="cat._id"/>
    {{ cat.label[lang.code] }}
</label>

{{cat.label[lang.code]}

这很有道理。。谢谢你帮助保罗！