Cách liên kết dữ liệu chính xác với các nút radio trong Angular2?

Question

tôi có thành phần với hai nút radio 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> 
        </div> 

khi tôi nhấp vào lưu và gửi mẫu đến máy chủ tôi thấy giá trị được lựa chọn hợp lệ của nút radio trên phía máy chủ. Và giá trị này được lưu trữ trong cơ sở dữ liệu mà không có lỗi. Nhưng radiobutton với giá trị thích hợp không phải là cheked sau khi dữ liệu ràng buộc. Trong DevTools Tôi thấy nút radio linh sam:

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

Thứ hai nút radio:

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

Tôi thấy rằng góc thay đổi các thuộc tính và chờ đợi rằng nút radio thứ hai sẽ được kiểm tra. Nhưng điều này không xảy ra. Tôi đang làm gì sai?

Answer 1

Tính năng này hoạt động trong trường hợp của tôi. Tôi xóa [(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> 
        </div> 

và TS phương pháp nhìn như:

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

Answer 2

Bạn không cần [kiểm tra] thử với [(ngModel)] cũng sử dụng [value] = "1 "thay vì value =" 1"

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