Angular 如何在ngFor循环中将类添加到特定的'li'标记？

我试图在

li

tagon

ngFor

循环中的鼠标上方添加类。但是当鼠标滑过

li

标记时，所有

li

标记

btn success

类都被添加。如何将类添加到ngFor循环中的特定

li

标记

<li class="hhwtmainmenu" *ngFor="let headermenu of headermenus.header; let i=index; " [class.btn-success]="mouseOvered" (mouseout)="mouseOvered=false" (mouseover)="mouseOvered=true">
    {{headermenu.title}}
</li>

{{headermenu.title}

您还必须根据您的要求添加第二个条件，如[class.btn success]=“鼠标悬停&&xxxx==yyyyy”

示例：假设您只想在headermenu标题为“test”时添加类，那么您必须按照下面的方式编写上述逻辑

[class.btn-success]="mouseOvered && headermenu.title=='test'"

试试这个：

HTML:

<li class="hhwtmainmenu" *ngFor="let headermenu of headermenus.header; let i = index "  [ngClass]="{'btn-success': (i == 2)}" (mouseout)="mouseOvered=false" (mouseover)="mouseOvered=true">
{{headermenu.title}}
</li>

---

只有在需要一些业务逻辑来决定属性时，才应该使用angular绑定（在您的例子中是CSS类）。应避免绑定，因为它会由于其更改检测和生命周期挂钩而导致angular的过度计算

和您的情况一样，您只需要在hover上添加样式，就可以对li元素使用：hover类

.hhwtmainmenu:hover {
    // The Styling you added in btn-success class
}

---

虽然我的方法不使用任何角度指令，但它会提高代码的性能。

不是一个很好的解决方案，但会为您带来好处

<ul><li class="hhwtmainmenu"
  *ngFor="let headermenu of headermenus.header; let i=index; "
  [class.btn-success]="selectedIndex === i"
  (mouseout)="removeIndex(i)"
  (mouseover)="setIndex(i)">
{{headermenu.title}}
</li>
</ul>

看看这个
app.component.html

{{number}{{i}}

app.component.ts
从“@angular/core”导入{Component}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
name=“Angular”；
所选=假；
selectedIndex=-1；
数字=[10,20,30,40,50]；
toggleClass（索引：编号）{
this.selectedIndex=this.selectedIndex==索引？-1:索引；
}
getCondition（）{
返回此项。选择此项；
}
}
app.component.css
.selectedd{
颜色：红色；
}

您还必须根据您的需求添加第二个条件，如[class.btn success]=“mouseOvered&&xxxx==yyyy”@SandipPatel，它来自于

&&xxxx==yyyyy

？您必须添加这样的逻辑

&&xxxx==yyyyy

是您想要添加类的条件逻辑。@SandipPatel，你能解释更多吗？标题是动态的。你必须构建和编写你的逻辑，我如何知道你的逻辑，你想在哪里应用classi尝试过你的逻辑，但不起作用<代码>[class.btn success]=“mouseOvered&&headermenu.title=='test'”你的任何一个headermenu标题是'test'？，你检查正确了吗？不可能给定的解决方案是100%正确的，尝试删除你自己的条件如下：[class.btn success]=“headermenu.title=='test'”是的，

（i==2）

这是条件。类未添加到li标记中。这是我的代码

只打印

（i==2）

并检查其值，

true

或

false

。我尝试了

（i==0）

。它对第一个

li

标记起作用，对第二个

li

不起作用。tagI认为您的

i

是

未定义的
。这就是为什么它适用于
0
使用
index as i
而不是
let i=index
当回答一个旧问题时，如果您包含一些上下文来解释您的答案如何有帮助，特别是对于已经有公认答案的问题，您的答案对其他StackOverflow用户会更有用。请参阅：。
<ul><li class="hhwtmainmenu"
  *ngFor="let headermenu of headermenus.header; let i=index; "
  [class.btn-success]="selectedIndex === i"
  (mouseout)="removeIndex(i)"
  (mouseover)="setIndex(i)">
{{headermenu.title}}
</li>
</ul>

  setIndex(index: number) {
this.selectedIndex = index;
}
removeIndex(index: number) {
this.selectedIndex = null;
}

have a look at this this 

app.component.html

<div class="ul">
  <li
   *ngFor="let number of numbers;let i=index"
    [class.selectedd]="i===selectedIndex"

    (click)=toggleClass(i)>
    {{number}} {{i}}
  </li>
</div>


app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  selected = false;

  selectedIndex = -1;

  numbers = [10, 20, 30, 40, 50];

  toggleClass(index: number) {
    this.selectedIndex = this.selectedIndex === index ? -1 : index;
  }
  getCondition() {
    return this.selected;
  }
}

app.component.css

.selectedd{
  color:red;
}