web-dev-qa-db-ja.com

Angular2のラジオボタンにデータをどのように正しくバインドしますか？

2つのラジオボタンを備えたコンポーネント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>

[保存してモデルをサーバーに送信]をクリックすると、サーバー側でラジオボタンの有効な選択値が表示されます。そして、この値はエラーなしでデータベースに保存されます。ただし、データをバインドした後、適切な値のラジオボタンはチェックされません。 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">

2番目のラジオボタン：

<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">

angular属性を変更し、2番目のラジオボタンがチェックされるのを待っています。しかし、これは起こりません。何が間違っていますか？

angulardata-bindingradio-button
21
Seva

これは私の場合はうまくいきます。 [（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;
}
26
Seva

[チェック]する必要はありません[（ngModel）]で試す[value] = "1"ではなく[value] = "1"も使用

<input type="radio" name="Coverage" [value]="1" [(ngModel)]="formdata.coverage_verified"  />Yes
14
shivam srivastava
<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>
1
Voodoo Savage