javascript - Cum să schimb culoarea de fundal atunci când dau clic pe un <li> în Angular?

Am un fel de meniu lateral. Așa:

 Projects: 
       All
       project1
       project2

Când fac clic pe un element, vreau să-i schimb culoarea de fundal. (de la negru la verde).

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

Dar, ceea ce am făcut până acum a fost să schimb culoarea pentru toate proiectele când am dat clic pe un proiect. Acum toate sunt verzi. Nu știu cum să fac asta pentru un element anume.

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

În componentă:

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

Presupun că această metodă de proiect activ se aplică tuturor elementelor li și rămâne activă când a fost setată pe adevărat.

Răspuns #1

Văd că aveți un routerLinkActive="active", acesta ar trebui să seteze clasa active pe elementul li. Apoi, în CSS-ul dvs., puteți face:

li.nav-item.active { background: green; }

Este posibil să fie nevoie să setezi [routerLinkActiveOptions]="{exact: true}" pentru rutare exactă și evidențiere.

Atunci poți scăpa de isActiveProject pentru schimbarea culorii de fundal și de ngStyle.

Răspunsul #2

Trebuie să stocați indexul proiectului activ și să îl comparați cu elementul din bucla ngFor:

Componentă :

public activeProjectIndex: number;

public activeProject(index: number): void {
  this.activeProjectIndex = index;
}

HTML :

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