Использование шаблонов @ngFor для создания радиокнопки

У меня есть следующий код, который я бы хотел использовать * ngFor. Код показывает только 2 радиокнопки, но их больше.Использование шаблонов @ngFor для создания радиокнопки

options: string[] = [ 
    'Single', 
    'Married', 
    'Divorced', 
    'Common-law', 
    'Visiting' 
    ]; 

<input 
    #single 
    class = 'with-gap' 
    name = 'group3' 
    type = 'radio' 
    id = 'single' 
    value = 'Single' 
    (change) = 'radioBtnChange$.next(single.value)'/> 
<label for = 'single'>Single</label> 

<input #married 
     class = 'with-gap' 
     name = 'group3' 
     type = 'radio' 
     id = 'married' 
     value = 'Maried' 
     (change) = 'radioBtnChange$.next(married.value)'/> 
<label for = 'married'>Married</label>

Вместо того, чтобы писать отдельные радио-кнопки, как я мог бы использовать @ngFor так что код может быть более кратким.

EDIT1 Синтаксис libarary выглядит следующим образом:

<input class="with-gap" name="group3" type="radio" id="test5" checked /> 
    <label for="test5">Red</label>

Это часть http://materializecss.com/forms.html

Я попытался обертывание входа в метке, но получает отображается только ярлык.

Спасибо за любой вклад.

EDIT2

<label *ngFor="let option of options" for='option' > 
    <input 
     #option 
     type="radio" 
     class = 'with-gap' 
     name='group3' 
     id='option' 
     [value]='option' 
     (change) = 'radioBtnChange$.next(option.value)'/> 
    </label>

источник

2016-11-25 st_clair_clarke

Проблема был вы используете option в качестве шаблона имени переменного, а также *ngFor текущего значения итерации. Вот почему *ngFor получает overriden от #option шаблон radio элемент.

Вы должны изменить один из имени переменной, предположим *ngFor="let option of options" к *ngFor="let opt of options"

Markup

<label *ngFor="let opt of options" for='option' > 
    <input 
     #option 
     type="radio" 
     class = 'with-gap' 
     name='group3' 
     id='option' 
     [value]='option' 
     (change) = 'changed(opt)'/> 
</label>

Demo Here

источник

2016-11-25 21:08:18

Как и раньше, когда я это пробовал, ничего не отображается –

Это должно сработать, что случилось? –

Я так и думал, когда сначала обернул его - у меня был тип = «радио». Однако этого не произошло. Ошибок нет. Ничего не отображается. Я кладу все в div и с лейблом. Метка отображает, но ничего из шаблона * ngFor. Имейте в виду синтаксис библиотеки, в которой я использую ' Red l' at [http://materializecss.com/forms.html](http://materializecss.com/forms.html)#radio –

Если и использовать по крайней мере Angular2 RC2 я считаю, что должно работать:

<label *ngFor="let option of options"> 
    <input 
    #option 
    type="radio" 
    class = "with-gap" 
    name="group3" 
    id="option" 
    [value]="option" 
    (change) = "radioBtnChange$.next(option.value)"/> 
</label>

Обратите внимание на «вместо» и не делайте этого для опции «option»!

источник

2016-11-25 22:43:09 lastWhisper

Извините, но ничего не отображается. Я использую угловое ~ 2.1.2 –

Использование шаблонов @ngFor для создания радиокнопки

ответ

Смежные вопросы