如何在没有本地索引管理器的* ngFor Angular组件中使用[ngClass]？

Question

I'm using the following markup to mark the clicked component as active.

<div *ngFor="let menu of menus;"
     (click)="onClick($event,menu.link)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

The method handling the click is as follows.

onClick(target, link) {
  target.active = !target.active;
  this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}

It seems that the value of target.active goes from undefined to true to false to true etc. but the style doesn't get set. (I'm printing out the whole component to the console and can't see the addition of the class' name.)

Question: What am I missing in this approach?

NB, I know how to resolve it by approaching it from a different angle. I set up a local variable keeping the index and setting it like shown here . The aim of my question is to learn to achieve the requested behavior in a more like-a-bossy way.

Answer 1

target here:

onClick(target, link) {
  target.active = !target.active;   <------------
  this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}

doesn't refer to menu , it refers to the event. But based on your ngClass directive:

[ngClass]="{'active':menu.active}">

You need to set active to menu variable and so it can be done like this:

<div *ngFor="let menu of menus;"
     (click)="onClick(menu,menu.link)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

Answer 2

Instead of passing in the $event, send it the actual menu object. Like this:

<div *ngFor="let menu of menus;"
     (click)="onClick(menu)"
     [ngClass]="{'active':menu.active}">
  {{menu.title}}
</div>

And in the component:

onClick(menu) {
  menu.active = !menu.active;
  this.router.navigate([{ outlets: { primary: [""], menus: [menu.link] } }]);
}