Question

我尝试在li循环的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>

Answer 1

试试这个：

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>

风格：

.btn-success:hover {
    background:blue;
}

Answer 2

只有在确定该属性所需的某些业务逻辑（即您的情况下为CSS类）时，才应使用angular绑定。应该避免绑定，因为它由于其变化检测和生命周期钩子导致过度计算。

在您的情况下，您只想在悬停时添加样式，您可以使用：hover类为您的li元素。

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

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

Answer 3

不是一个很好的解决方案，但会帮你解决问题。

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

Answer 4

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

Answer 5

您还必须根据您的要求添加第二个条件，例如 [class.btn-success] =“mouseOvered＆amp;＆amp; xxxx == yyyyy”

示例：假设您只想在headermenu title为“test”时添加类，那么您必须编写如下逻辑：

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

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

5 个答案: