如何正确地将数据绑定到Angular2中的单选按钮？

Question

我有两个单选按钮的组件 HTML look like

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

当我单击保存并将模型发送到服务器时,我看到服务器端的单选按钮的有效选择值.并且此值存储在数据库中而没有错误.但是在绑定数据后,具有适当值的radiobutton不会受到影响.在devTools中,我看到了第一个单选按钮:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

第二个单选按钮:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

我看到角度改变了属性并等待第二个单选按钮被检查.但这不会发生.我究竟做错了什么？

Answer 1

这适用于我的情况.我删除[(ngModel)]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

和TS方法看起来像:

onProfitSelectionChange(entry): void {
    this.model.ForeignCompany.ProfitCode = entry;
}

Answer 2

您不需要[checked]尝试使用[(ngModel)]也使用[value] ="1"而不是value ="1"

<input type="radio" name="Coverage" [value]="1" [(ngModel)]="formdata.coverage_verified"  />Yes