如何通过单击 ngFor 内的角度突出显示选定的单选按钮

如何解决如何通过单击 ngFor 内的角度突出显示选定的单选按钮

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

当我单击输入单选按钮时，我需要以某种颜色选择特定项目。 添加了更改事件但无法更改。

解决方法

您可以使用传递给函数的事件来访问元素，因为它是一个点击事件，所以该事件有一个目标，即输入元素，因此您可以执行以下操作：

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

这个变化不会很明显，我只是举个例子，因为你没有说明以下是什么意思：

要以某种颜色选择的特定项目

如果要更改 eats 元素的 div，可以在模板上执行以下操作：

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

并在您的组件中：

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

我在这里假设吃是一个对象。此外，您可以将绑定更改为类（使用 ngClass）并以这种方式进行大量 css 更改