在 Angular 中单击 <li> 时如何更改背景颜色？

我有一种侧边栏菜单。像这样：

 Projects: 
       All
       project1
       project2

当我单击一个项目时，我想将其更改为背景颜色。（从黑色到绿色）。

Projects: 
           All
           project1 // This was clicked and I want to be GREEN
           project2

但是，到目前为止，我所做的是在单击项目时更改所有项目的颜色。都是绿色知道的。我不知道如何为特定项目做到这一点。

<div class="container">
  <h5>Projects: </h5>
  <div class="container-fluid">
    <ul class="nav navbar-nav side-nav">
      <li routerLinkActive="active" class="nav-item">
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
      </li>
    </ul>
    <ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
      <li routerLinkActive="active" class="nav-item" >
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
      </li>
    </ul>
  </div>
</div>

在组件中：

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

我想这个活动的项目方法适用于所有 li 元素，当它被设置为 true 时仍然处于活动状态。