在預取的單選按鈕不得到遏制

Question

1. 我需要[(ngModel)]="salutation" #salutation="ngModel"進行驗證，並具有這是防止我的單選按鈕來選擇的onLoad

2. compareOptions（）返回true

3. 使用版本angular4。 1.2

<app-validation-message [validation-control]="salutation"> 
      <app-styled-input [title]="'Male'" > 
      <div class="custom-radio" > 
       <input id="female" name="salutation" type="radio" [value]="options[0].id" [checked]="this.compareOptions(options[0]))" 
        [required]="required" [(ngModel)]="salutation" #salutation="ngModel"> 
       <label for="female"><span></span>{{options[0]['title']}}</label> 
      </div> 
      <div class="custom-radio margin-left-10" > 
       <input id="male" name="salutation" type="radio" [value]="options[1]" 
        [checked]="this.compareOptions(options[1])" 
        [required]="required" [(ngModel)]="salutation" #salutation="ngModel"> 
       <label for="female"><span></span>{{options[1]['title']}}</label> 
      </div> 

      </app-styled-input> 
     </app-validation-message>  

組件：

compareOptions(obj:any){  
     return obj.id===this.personalData.salutation.id; 
     } 

Answer 1

嘗試添加[attr.checked]="true"到您的單選按鈕，它爲我工作完美。

Answer 2

我建議你迭代你的options而不是長時間寫模板。正如我在評論中提到的，避免在模板中調用方法，每次Angular運行更改檢測時都會執行這些方法，這可能會經常發生。所以我們想要做的，是初始值設置爲ngModel，即salutation：

ngOnInit() { 
    this.salutation = this.personalData.salutation.id; 
} 

現在我們也可以擺脫在模板中的[checked]屬性的，因爲我們使用的是ngModel代替。所以，你修改你的模板爲以下內容：

<div *ngFor="let opt of options">{{opt.title}} 
    <input type="radio" [(ngModel)]="salutation" name="option" 
     #option="ngModel" [value]="opt.id" /> 
</div> 

演示：http://plnkr.co/edit/1vAlRdhVSMPH12VEg5Fj?p=preview