Angular 2.1，单选按钮在加载时不更新

Question

对于 Angular 2.1 - 即使我的采访变量中的属性已设置且不为空，单选按钮也未设置。

我尝试查看以下帖子并尝试了几乎所有解决方案，但没有任何运气。

Post1 Post2

首次设置

这在单选按钮之间切换时有效，但它不会在加载时设置选定的单选按钮。

<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePersonal" value="0" [checked]="interview.interviewChannelType === 0"
                                id="interviewChannelTypePersonal" required />
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePhone" value="1" [checked]="interview.interviewChannelType === 1"
                                id="interviewChannelTypePhone" required />
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypeVideo" value="2" [checked]="interview.interviewChannelType === 2"
                                id="interviewChannelTypeVideo" required />
<label for="interviewChannelTypeVideo">Video</label>

第二次尝试

这会在加载时检查选定的单选按钮，但它不会让我在单选按钮之间导航。

<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 0" value="0" />
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 1" value="1" />
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 2" value="2" />
<label for="interviewChannelTypeVideo">Video</label>

interveiwChannelType 是一个枚举：

export enum InterviewChannelType {
Personal = 0,
Phone = 1,
Video = 2
}

我希望你们中的一些人可以在正确的方向上给我一个推动！提前致谢。

找到解决方案

感谢 HirenParekh 的评论，他让我意识到使用该值作为角度属性而不是正常属性。将其从 value="0" 更改为 [value]="0" 就可以了。

Answer 1

你必须绑定单选按钮的 value 属性。在您的第一个设置中，按如下方式绑定 value 属性。

<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypePersonal" 
                    [value]="InterviewChannelType.Personal" 
                    [checked]="interview.interviewChannelType === 0"
                    id="interviewChannelTypePersonal" required 
/>
<label for="interviewChannelTypePersonal">Personlig møde</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypePhone" 
                    [value]="InterviewChannelType.Phone"  
                    [checked]="interview.interviewChannelType === 1"
                    id="interviewChannelTypePhone" required 
/>
<label for="interviewChannelTypePhone">Telefon</label>
<input type="radio" [(ngModel)]="interview.interviewChannelType" 
                    name="interviewChannelTypeVideo" 
                    [value]="InterviewChannelType.Video"  
                    [checked]="interview.interviewChannelType === 2"
                    id="interviewChannelTypeVideo" required 
/>
<label for="interviewChannelTypeVideo">Video</label>