0

I have this value Rating=7 in my database and I am getting this value and storing on editUserDetails={}. Now I am displaying 5 to 9 radio buttons in the browser and I want to select the radio button according to the database value. I mean I want to select the radio with value = 7. I wrote this code but it is not working. What's the issue and what I need to put. Can someone please help?

my Html

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" name="Rating" [value]="Rating" [checked]="radioChange(Rating)"> 
            {{Rating.rating}}
          </div>

my Ts

rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]

    radioChange(Rating){
     var match=false;
     if(this.editUserDetails.Rating===Rating){
       match=true;
     }else{}
     this.temp = 0;
     return match;
    }
Improve this question

4 Answers 4

Reset to default
1

strong text 

//.ts file 

data:string;//gloabal declaration 

 rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]
    
    
    ngOnInit(){
    
    this.data="7";//your formatt
    }
 <div class="col-md-6" *ngFor="let Rating of rates">
 <input type="radio" name="radiodata" [value]="Rating.rating" [(ngModel)]="data"> {{Rating.rating}}
                      </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The code is in part good, but you passing to function radioChange as parameter and object that contain and attribute:

Rating = {rating: "6"}

So, when you compare you use ===, and the comparation need to be an object equal, so this.editUserDetails.Rating need to be:

Rating = {rating: "6"}

If value of this.editUserDetails.Rating is a single number as String, you need to change the comparison to:

this.editUserDetails.Rating===Rating.rating
Improve this answer

1 Comment

Not working, I tried this ----->this.editUserDetails.Rating===Rating.rating
0

You should do something like this -

 <div class="col-md-6" *ngFor="let Rating of rates">
       <input type="radio" name="Rating" 
                          [value]="Rating" 
                         [checked]="this.editUserDetails.Rating === Rating"> 
                         <!-- above line marks your radio button checked -->
                          [value]="Rating" 
                       (change)="onSelectionChange(entry)" > 
                           {{Rating.rating}}
    </div>

If you really want -onSelectionChange(entry) is a function in your component for you to perform any action when the user changes the options -

onSelectionChange(entry) {
    this.selectedEntry = entry;
}
Improve this answer

2 Comments

I already tried this, but it is not working--->[checked]="this.editUserDetails.Rating === Rating
As Deborah said, set this.editUserDetails.Rating in the ngOnInit function. Maybe the value is not assigned when the DOM was loading. It's a one-time binding. Model --> Template.
0

It may be easier to use the built-in two-way binding. My radio buttons look more like this:

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" 
                   name="Rating"
                   [value]="Rating"
                   [(ngModel)]="selectedRating"> 
            {{Rating.rating}}
</div>

And the component then looks like this:

selectedRating:any;

rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]

Then in the ngOnit(), after you've retrieved your data:

   console.log(this.editUserDetails.Rating);
   this.selectedRating = this.rates.find(item => 
       item.rating === this.editUserDetails.Rating.rating);

This complexity is due to the fact you are binding the objects instead of the numbers. This code finds the exact matching object in the array.

If the values are indeed numbers, it may be easier to bind the numbers instead.

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" 
                   name="Rating"
                   [value]="Rating.rating"
                   [(ngModel)]="selectedRating"> 
            {{Rating.rating}}
</div>

Then in the ngOnit(), after you've retrieved your data:

   // Note that this is assigning the numeric value, not the object
   console.log(this.editUserDetails.Rating.rating);
   this.selectedRating = this.editUserDetails.Rating.rating;
Improve this answer

6 Comments

No But i stored in my database Rating=7 for one user. In my database which value is there, just i want to select that value in browser
it selects always last value. my last value is 9(radio).But user selects 7.
What is this.editUserDetails.Rating? Is it not the one from the database? Can you add an update to your question with the code using the technique above?
yes, user selects rating from 5 to 10 i gave. one user selects 7. i saved in database Rating="7" like this. now i am getting that 7 to frontend and stores in editUserDetails={}. now i need to display selected radio 7 in browser
Oh ... I just realized I missed the value property on the input element. I'll update my answer.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.