Angular 4单选按钮问题答案

【问题标题】：Angular 4 radio button issueAngular 4单选按钮问题
【发布时间】：2017-10-03 20:41:23
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： forms angular

【解决方案1】：

由于您使用的是[(ngModel)]，因此您是在告诉 Angular 进行双向数据绑定。

双向意味着从代码到标记，反之亦然。因此，当 Angular 创建单选按钮（标记）时，它会检查您的 AppComponent 是否具有 selectedCategory 属性，如果有，它将在值匹配的 one 单选按钮上设置 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>

【讨论】：

有道理.. 谢谢你帮助 Paolo！