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

时间:2016-12-16 15:24:28

标签: angular radio-button

对于角度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"就可以了。

1 个答案:

答案 0 :(得分: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>