点击 ngFor li 的角度变化背景答案

【问题标题】：Angular change Background of clicked ngFor li点击 ngFor li 的角度变化背景
【发布时间】：2018-06-24 22:11:21
【问题描述】：

我有一个带有一些 li 的 ul 元素我用 *ngFor 获取那些 li。它们的背景颜色是白色，但如果我点击它们，我想将背景颜色更改为红色。但我只想更改我单击的 li 的背景颜色，而不是每个 li。

<div class="Container">
  <h1>My Children</h1>
  <ul class="list-group">
    <li style="cursor: pointer" class="list-group-item" *ngFor="let Child of children" (click)="onChildSelect(Child)" >{{Child.Name}}
    </li>
  </ul>
</div>

【问题讨论】：

标签： html css angular ngfor

【解决方案1】：

我会将这个添加到您的 li 中：

[style.background-color]="Child.IsChildSelected"

制作：

<li style="cursor: pointer" class="list-group-item" 
    *ngFor="let Child of children" (click)="onChildSelect(Child)" 
    [style.background-color]="Child.BackgroundColour" >

然后你的点击函数应该改变子背景颜色（你可以将它作为一个字符串返回）。例如：

onChildSelect(Child)
{
    // This would work but if you have the previously selected child stored 
    // it would be better to just turn that one white
    for (let myChild of this.children) {
        myChild.BackgroundColour = "white";
    }

    Child.BackgroundColour = "red";
}

如果需要，您可以使函数更复杂以具有多种颜色或将其他子项更改为未选择的颜色。

【讨论】：

但这如何改变颜色？
糟糕，等等，我漏掉了一部分
谢谢你的工作，但我有一个问题。如果我点击第一个孩子，它的颜色会变成红色，当我再次点击它时，它会变回我想要的白色，但是如果我点击第一个然后点击第二个，我希望第一个改变再次变为白色，第二个变为红色。但是由于我们点击了第二个，我们的函数中不再有第一个孩子，所以我不能把它改回来......
没有 this.children 可供您访问吗？在将新选择的子项设为红色之前，您可以在选择一个子项时将所有子项设为白色。
是的，我可以访问 this.children，但是如何将整个数组设置为白色？