Angular2+ 单选按钮不可点击

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>

inputs 上的 *ngIf 条件是 Unknown 总是在初始化时选择。

questions/answers 的列表呈现良好，但我实际上无法单击任何答案选项。对我哪里出错有什么建议吗？

Answer 1

事实证明类 k-radio 和 k-radio-label（对 Angular 使用 Kendo UI）需要 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+ 单选按钮不可点击

Angular2+ Radio Button Not Clickable

forms

radio

angular