如何将 class 添加到 ngFor 循环中的特定 `li` 标签？

Question

我正在尝试在 ngFor 循环的 li 标记中鼠标悬停时添加 class。但是当鼠标悬停在 li 标签上时，所有 li 标签 btn-success class 都会被添加。如何将 class 添加到 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

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

示例：假设您只想在 headermenu 标题为 "test" 时添加 class，那么您必须按如下方式编写上述逻辑。

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

Answer 2

试试这个：

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 3

仅当需要某些业务逻辑来决定属性时，才应使用 angular 绑定（即在您的情况下为 CSS class）。应避免绑定，因为它会导致 angular 由于其更改检测和生命周期挂钩而导致过度计算。

对于您的情况，您只想在悬停时添加样式，您可以对 li 元素使用 :hover class。

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

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

Answer 4

不是一个很好的解决方案，但可以为您解决问题。

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

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

如何将 class 添加到 ngFor 循环中的特定 `li` 标签？

how to add class to particular `li` tag in ngFor loop?

ngfor

angular