ngFor循环出来的li列表，如何实现点击一个li，让它单独底色变化，而其它的li却不受影响呢？

Question

ngFor循环出来的li列表，如何实现点击一个li，让它单独底色变化，而其它的li却不受影响呢？

Answer 1

<li *ngFor="let item of arr | async; let i = index;" 
    [class.change-color]="selectedindex === i" (click)="onClick(i)">
</li>

维护一个变量selectedIndex, 在点击li的事件处理函数onClick中设置selectedIndex,
这样change-color的样式就会动态的添加或移除了.

Answer 2

每一项加一个 boolean 标示字段，点击时单独修改此字段，结合 ngClass 切换样式类。

Answer 3

这个可以用JS结合css中的选择器class来实现，首先给其中一个起个class名把自己喜欢的颜色写上去，然后在JS中循环每个li，先给每个li让它们的类型等于“” 例如: className = "" 在循环体外把当前点击的的那个li通过this来将其类型变为css中你起的class类名