Angular 2 - 使用 ngFor 单独更改列表项 bg-color

Question

如何更改使用 ngFor 生成的列表项的背景颜色？我想在单击或悬停每个列表项时单独更改每个列表项的背景颜色？

这就是我现在所拥有的，但是当我单击一行时它会一起更改所有行。

<ul class="list-group col-lg-6">
    <li href="#" class="list-group-item" [style.background-color]="whenClicked ? 'yellow' : 'none'" *ngFor="let recipe of Items "
     (click)="ChangeColor()">
      {{recipe.Title}}</li>

  </ul>

我根据这里的一位会员的建议稍微修改了代码。现在是：

<ul class="list-group col-lg-6">
    <li href="#" class="list-group-item special-hover" *ngFor="let recipe of Items ">
      {{recipe.Title}}</li>

  </ul>

这是 css 组件：

.special-hover > li:active{
 background:#67EC32 
}

这是 ts 组件：

import { Component } from '@angular/core';


@Component({
  selector: 'recipeList',
  templateUrl: './recipeList.component.html',
  styleUrls: ['./recipeList.component.css']
})

export class RecipeListComponent {
  buttonNew = "New Recipe";

  Items: ListItem[] = [
    { Title: 'Chocolate Cake' },
    { Title: 'RoastBeaf' }
  ];

  RecipeTitle:string;

  whenClicked = false;

  ChangeColor(){
      this.whenClicked = true;
  }

  addToList(){
    this.Items.push({Title: this.RecipeTitle})
  }
}

class ListItem{
  Title: string;
}

Answer 1

这是因为 whenClicked 变量由列表中的所有项目共享。您需要分别存储每个项目的状态。（将点击处理程序和 whenClicked 移至项目对象。）大致如下：

<ul class="list-group col-lg-6">
    <li href="#" class="list-group-item" *ngFor="let recipe of Items ">
      <span (click)="recipe.ChangeColor()" [style.background-color]="recipe.whenClicked ? 'yellow' : 'none'" >{{recipe.Title}}</span>
    </li>
</ul>

要仅在悬停时着色，您可以单独使用 css 来完成： https://codepen.io/pbalaga/pen/zEKgwP

Answer 2

您可以一一跟踪点击状态的li标签：

HTML

    <ul class="list-group col-lg-6">
        <li href="#" class="list-group-item" (click)="whenClicked[i]=!whenClicked[i]" 
              [style.background-color] = "whenClicked[i]  ? 'blue' : 'green'" 
              *ngFor="let recipe of Items ; let i = index;trackBy: tracked">
              {{recipe.Title}}</li>
    </ul>

打字稿

  whenClicked = [false,false];

Stackblitz Demo

如果你不想把颜色放回去，那么...(click)="whenClicked[i]=true" ...就够了。

Angular 2 - 使用 ngFor 单独更改列表项 bg-color

Angular 2 - change list item bg-color individually using ngFor

ng-style

ngfor

angular