2017-04-24 11 views
1

有する複数のラジオ・ボタンを作成する私はオブジェクトの配列の長さに基づいて、ラジオボタンの動的番号必要* ngFor [Angular2]

:私が試したコードである続い

:(例えば:enum_details)を

<div *ngFor="let enum of enum_details"> 
    <label for="enum_answer_{{enum.value}}"> 
    <input id="enum_answer_{{enum.value}}" type="radio" name="enums" [(ngModel)]="enum.value"> 
    {{enum.display_text}} 
    </label> 
</div> 

しかし、ラジオをクリックすると、常に最後のものが選択され、値は決してngModelに割り当てられません。

ngModelを削除すると、無線機能は正常に動作しますが、値は設定されません。ここには何ができますか?

答えて

2

この

<div *ngFor="let enum of enum_details"> 
     <label for="enum_answer_{{enum.name}}"> 
     <input id="enum_answer_{{enum.name}}" [value]='enum.name' type="radio" name="enums" [(ngModel)]="radioSelected"> 
     {{enum.name}} 
     </label> 
    </div> 
    <button (click)='radioFun()'>Checked value of radio button</button> 

実施例

Working example here

のようにあなたのコードを使用します
1

このようなものを試してみてください。

<div class="radio" *ngFor="let key of enum_details"> 
      <label> 
       <input type="radio" name="keys_on_hand" [value]="key.value" [(ngModel)]="key.value"> 
        {{key.display}} 
      </label> 
    </div>