如何在 ngFor 中单击 angular 以突出显示选定的单选按钮

Question

component.ts

    //all imports are done
    
ngOnInit() {
      this.list = {
          'eatList': [{
            'class': 'Fruits',
            'color': ['Red', 'White', 'Black'],
            'imageSrc': ['/assets/images/fruit/red-fruit.png', 
              '/assets/images/fruit/black-fruit.png',
              '/assets/images/fruit/white-fruit.png'],
             'weights' : [60, 50]
          },
          {
            'modalName': 'Vegetable',
            'color': ['Green', 'Black'],
            'imageSrc': ['/assets/images/veg/black-veg.png', /assets/images/veg/green-veg.png'],
            'weights' : [40, 50]

}

component.html

<div>
  <div *ngFor="let eats of list.eatList" "
   >
    <h3>{{eats.class}}</h3>
    <img src="{{eats.imageSrc[0]}}" alt="image" />

    
    
    <div>
         <ul>
      <li *ngFor="let weight of eats.weights;let i = index;">
        <input type="radio" [value]="weight" (change)="handleChange($event)" [attr.id]="i" 
          name="weight" />
        <label for="{{i}}">{{weight}}</label>
      </li>
    </ul>
    </div>
  </div>
</div>

When I click on the input radio button I need the particular item to be selected in some color. added the change event but unable to change it.

Answer 1

You can access the element by using the event passed to the function, since it's a click event, the event has a target, which is the input element, so you can do something like:

handleChange(event) {
    event.target.style.color = "yellow";
}

This change won't be noticeable, I just gave it as an example, since you didn't specify what does the following means:

particular item to be selected in some color

If you want to change the div for the eats element, you can do something like the following on the template:

<div>
  <div *ngFor="let eats of list.eatList" [style.background]="eats.backgroundColor"
   >
    <h3>{{eats.class}}</h3>
    <img src="{{eats.imageSrc[0]}}" alt="image" />

    
    
    <div>
         <ul>
      <li *ngFor="let weight of eats.weights;let i = index;">
        <input type="radio" [value]="weight" (change)="handleChange($event, eats)" [attr.id]="i" 
          name="weight" />
        <label for="{{i}}">{{weight}}</label>
      </li>
    </ul>
    </div>
  </div>
</div>

and in your component:

handleChange(event, parent) {
  parent.backgroundColor = "yellow";
}

I've made an assumption here that eats is an object. Also, you can change the binding to be for a class (using ngClass) and make a lot of css changes that way