創建多個單選按鈕與* ngFor [Angular2]

Question

我需要基於對象數組的長度單選按鈕的動態數（例如：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，收音機工作正常，但沒有設置值。這裏可以解決什麼問題？

Answer 1

使用這樣的代碼

<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

Answer 2

嘗試這樣的事情。

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