ラジオボタン生成のための@ngForテンプレートの使用

Question

* ngForを使用したい次のコードがあります。コードには2つのラジオボタンしか表示されていませんが、もっと多くのラジオボタンがあります。

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> 

Answer 1

問題は、テンプレート変数名だけでなく、*ngFor現在の反復値としてoptionを使用していました。だから*ngForが#optionテンプレートのテンプレートradioで上書きされてしまったのです。

あなたはuが動作するはずです、私は信じている、少なくともAngular2のRC2を、使用している場合*ngFor="let option of options"

*ngFor="let opt of options"にマークアップ

<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

Answer 2

を仮定し、変数名のいずれかを変更する必要があります。

<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> 

「代わりに」と「=オプション」のものには注意してください！