Получить динамическое значение переключателя в angular2

Question

Я пытаюсь заполнить некоторые вопросы динамическими ответами, но это не работает для меня.

Все работает нормально, но я не понимаю, как получить это значение динамического радио кнопки с вопросом, как:

General Assessment of the Programme:Good 
Quality of the Material Provided:Excellent 
Design of the Programme:Excellent 

Как я могу получить эти данные?

HTML

<table class="table table-bordered" *ngFor="let item of QuestionMaster.Questions let i=index"> 
    <tr> 
     <td colspan="5"> 
      <h5><b>{{i+1}}. {{item.question1}}</b></h5> 
     </td> 
    </tr> 
    <tr> 
     <td align='center' valign="center" *ngFor="let items of QuestionMaster.Ratings let i=index"> 
      {{items.description}} 
     </td>     
    </tr> 
    <tr> 
     <td align='center' *ngFor="let items of QuestionMaster.Ratings let i=index"> 
      <input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" /> 
     </td>     
    </tr> 
</table> 

JSON

{ 
    "Questions": [ 
     { "quid": 1, "question1": "General Assessment of the Programme ", "rowid": 1 }, 
     { "quid": 2, "question1": "Quality of the Material Provided ", "rowid": 2 }, 
     { "quid": 3, "question1": "Design of the Programme ", "location": "Pune", "username": "mdppune", "rowid": 3 }, 
     ... 
    ], 
    "Ratings": [ 
     { "rateid": 1, "rateno": 1, "description": "Poor" }, 
     { "rateid": 2, "rateno": 2, "description": "Fair"}, 
     { "rateid": 3, "rateno": 3, "description": "Good"}, 
     { "rateid": 4, "rateno": 4, "description": "Very Good"}, 
     { "rateid": 5, "rateno": 5, "description": "Excellent"} 
    ] 
} 

Answer 1

Шаблон приводится форма:

Некоторые изменения в ответ Гириш, так как он не работает, по крайней мере, для меня. Поэтому, если вы используете более новые угловые версии, вам нужно привязать значение имени каждого ввода формы с помощью ngModel, чтобы получить значения, привязанные к форме.

Также к нужному выходу:

General Assessment of the Programme:Good 
Quality of the Material Provided:Excellent 
Design of the Programme:Excellent 

вам нужно изменить name="{{item.rowid}}" в следующем фрагменте

<input type="radio" id="{{items.rateno}}" name="{{item.rowid}}" /> 

в

<input type="radio" [value]="items.description" name="{{item.question1}}" ngModel/> 

и как было сказано, использовать ngModel, а также установить a [value], потому что если вы не установите это, все радиостанции кнопки с этой же строки будут проверены при выборе переключателя.

После подать, теперь получить желаемый результат, а также, как:

{ 
    "General Assessment of the Programme ":"Poor", 
    "Quality of the Material Provided ":"Fair", 
    "Design of the Programme ":"Good" 
} 

Answer 2

Вы можете использовать форму и может получить все значения, как это:

<form #queForm="ngForm" novalidate (ngSubmit)="submitForm($event, queForm.value)" class="form-horizontal"> 
     <table class="table table-bordered" *ngFor="let item of QuestionMaster.Questions let i=index"> 
     <tr> 
      <td colspan="5"> 
      <h5><b>{{i+1}}. {{item.question1}}</b></h5> 
      </td> 
     </tr> 
     <tr> 
      <td align='center' valign="center" *ngFor="let items of QuestionMaster.Ratings let i=index"> 
      {{items.description}} 
      </td> 
     </tr> 
     <tr> 
      <td align='center' *ngFor="let items of QuestionMaster.Ratings let i=index"> 
      <input type="radio" name="{{item.rowid}}" [ngModel]="item.rowid" #rowid="ngModel" id="{{items.rateno}}" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <button type="submit" class="btn btn-primary btn-lg"> Submit </button> 
      </td> 
     </tr> 
     </table> 
</form> 

И в стороне контроллера

submitForm(event: any, model: any) { 
    console.log(' model ' + JSON.stringify(model)); /*--- Display your model value here -----*/ 
}