Радиокнопка Angular2 + не активируется - PullRequest
Новая
       8

Радиокнопка Angular2 + не активируется

0 голосов
/ 28 ноября 2018

У меня есть выпадающий список, который после выбора представляет пользователю список вопросов.Каждый вопрос имеет одинаковый набор ответов (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 всегда выбирается при init.

Список вопросов / ответов отображается нормально, но на самом деле я не могу нажать ни на один из вариантов ответов.Любые предложения, где я иду не так?

1 Ответ

0 голосов
/ 29 ноября 2018

Получается, что классам k-radio и k-radio-label (использующим Kendo UI для 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>
...