Angular2 +单选按钮不可点击

时间:2018-11-28 19:53:35

标签: angular forms radio

我有一个下拉菜单,选择后会向用户显示问题列表。每个问题都有相同的答案集(YesNoUnknown),我希望用radio按钮来表示。经过研究,我想出了以下代码:

<fieldset *ngIf="selectedService">
    <div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
        <!-- START Service Specific Questions START -->
        <div class="col-lg-12">
            <label>{{ question.questionText }}</label>
        </div>
        <div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
            <input *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
            <input *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
            <label class="k-radio-label">{{ answer.answerText }}</label>
        </div>
        <!-- END Service Specific Questions END -->
    </div>
</fieldset>

*ngIf上的inputs条件是这样的,因此总是在初始化时选择Unknown

问题/答案列表可以很好地显示,但我实际上无法单击任何选项来获取答案。有什么建议可以解决我的问题吗?

1 个答案:

答案 0 :(得分:0)

结果证明,k-radiok-radio-label类(使用Kendo UI for Angular)在各个元素中需要id=""for=""才能正常工作:

<fieldset *ngIf="selectedService">
    <div class="row form-group" *ngFor="let question of selectedService.questions; let i = index">
        <!-- START Service Specific Questions START -->
        <div class="col-lg-12">
            <label>{{ question.questionText }}</label>
        </div>
        <div class="col-lg-4" *ngFor="let answer of question.answers; let n = index">
            <input id="{{ question.typeValue + n }}" *ngIf="n != 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" />
            <input id="{{ question.typeValue + n }}" *ngIf="n == 2" type="radio" class="k-radio" name="{{ question.typeValue + i }}" [value]="answer.answerValue" (click)="getValue(answer.answerValue)" checked/>
            <label class="k-radio-label" for="{{ question.typeValue + n }}">{{ answer.answerText }}</label>
        </div>
        <!-- END Service Specific Questions END -->
    </div>
</fieldset>