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

Question

我正在使用以下标记将单击的组件标记为活动。

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

点击处理方法如下

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

似乎target.active的值从undefined到true到false到true等等但是样式没有设置。（我正在将整个组件打印到控制台，但看不到添加的 class' 名称。）

问题：我在这种方法中缺少什么？

注意，我知道如何从不同的角度接近它来解决它。我设置了一个局部变量来保存索引并将其设置为。我的问题的目的是学习以更专横的方式实现所要求的行为。

Answer 1

target 这里：

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

不是指menu，它指的是事件。但是根据您的 ngClass 指令：

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

您需要将 active 设置为 menu 变量，因此可以这样做：

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

Answer 2

不是传入 $event，而是将实际的菜单对象发送给它。像这样：

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

并且在组件中：

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

How to use [ngClass] in a *ngFor Angular component without a local index keeper?