未选中预取单选按钮

Question

1. 我需要 [(ngModel)]="salutation" #salutation="ngModel" 进行验证，这会阻止我的单选按钮在加载时被选中

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