时间戳

首页 > 解决方案 > 如何在 ngFor 内单击以突出显示选定的单选按钮

javascript - 如何在 ngFor 内单击以突出显示选定的单选按钮

问题描述

组件.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]

}

组件.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>

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

标签： javascriptangular

解决方案

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

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

推荐阅读