如何在角度2中动态获取单选按钮值？

Question

Need to display radio button values dynamically from array, and fetch the value of it based on which I need to display a <div> . please find the code below

html

<div *ngFor = "let fruit of fruits"
<input type = "radio"/>{{fruit}}>
</div>

component.ts -> contains the following array

fruits : string[] = ["apple", "mango"];

With this I am getting the radio buttons apple and mango.Need to get the value of the selected radio button (in assigning[(ngModel)], value) and Need to display another div based on individual selections. Please guide me on this

Answer 1

You can use [value]

<div *ngFor="let fruit of fruits">
    <input type="radio" formControlName="options" [value]="fruit">
    {{fruit}}
</div>`

Answer 2

<div *ngFor="let fruit of fruits">
<input type="radio" [value]="fruit" 
(change)="selectedFruitValue(fruit)">
{{fruit}}
</div>

in your ts file
first define a variable
i.e
fruitValue:string

and then write a function

selectedFruitValue(fruit){

this.fruitValue = fruit;

//for checking purpose
 console.log('fruit value is':+this.fruitValue);

}