Question

我有一个下拉菜单，选择后会向用户显示问题列表。每个问题都有相同的答案集（Yes，No，Unknown），我希望用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。

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

Answer 1

结果证明，k-radio和k-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>

Angular2 +单选按钮不可点击

1 个答案: