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

您可以逐个跟踪点击状态的标签：

<强> 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" ...就足够了。

Answer 2

这是因为<div *ngIf="bar$ | async; let bar"> <h3> {{bar}} </h3> </div>变量由列表中的所有项共享。您需要分别为每个项目存储状态。（将点击处理程序和whenClicked移动到项目对象。）这些内容：

whenClicked

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

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

2 个答案: