代码之家 › 专栏 › 技术社区 › Vel

如何在ngFor循环中向特定的“li”标记添加类?

ngfor angular

-1

Vel · 技术社区 · 6 年前

我正试图在中的鼠标上添加类 li 标记 ngFor 环但是当鼠标掠过 锂 标记所有 锂 标签 btn-success 类已添加。如何将类添加到特定 锂 ngFor循环中的标记?。

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

5 回复 | 直到 6 年前

Abhishek 6 年前

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

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

Ankit Kapoor 6 年前

只有当需要一些业务逻辑来决定属性时,才应该使用angular绑定(在您的案例中是CSS类)。应避免绑定,因为由于其变化检测和生命周期挂钩,它会导致角度计算过度。

和您的情况一样,您只需要在hover上添加样式,就可以为li元素使用:hover类。

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

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

Sangwin Gawande 6 年前

试试这个:

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

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

-1

Sandip - Frontend Developer 6 年前

您还必须根据您的要求添加第二个条件,如 [class.btn success]=“鼠标覆盖&xxxx==yyyy”

示例:假设您只想在headermenu title为“test”时添加类,那么您必须按如下所示编写上述逻辑。

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