Question

我有一个ul元素和一些我正在使用* ngFor的那些人。它们的背景颜色为白色，但如果点击它们，我想将背景颜色更改为红色。但我只想改变我点击的李的背景颜色，而不是每一个李。

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

Answer 1

我会把这个添加到你的李：

[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";
}

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

Angular change点击ngFor li的背景

1 个答案: