Question

正如标题所述；单击后，我试图更改li元素的样式。

我有一个由* ngFor指令填充的li元素的UL。我在另一篇文章中使用ngClass。问题在于，我没有更改特定的li而是单击我在指定ul范围内更改的所有li元素。我不太确定如何更改单击的指定li。当我单击以查看我的网页时，所有li元素都具有相同的类标签。

可能的解决方案：我在想如果我在click方法上得到li元素的值，该怎么办。然后在另一种方法中，将li元素更改为click方法中发现的先前值。我将如何做到这一点？

这是我当前的源代码。

我的观点

<ul class="hobbyList">
    <li *ngFor="let hobby of hobbies"  (click)="onSelect(hobby)">
        <span [ngClass]="{show: clicked, hide: !clicked}" class="badge">{{hobby.HobbyName}}</span>
    </li>
  </ul>

我的组件

  onSelect(hobby: hobbyObj, event): void {
      this.clicked = !this.clicked;
  }

我的css文件

.hide{
    color:blue;
}
.show{
    color:black;
}

Answer 1

在html文件中：

<ul class="hobbyList">
    <li *ngFor="let hobby of hobbies; let i = index" (click)="onSelect(i)">
        <span class="badge hide">{{hobby.HobbyName}}</span>
    </li>
</ul>

在ts文件中：

onSelect(i: number): void {
    var element = document.getElementsByclassName('badge')[i];
    element.classList.add("show");
}

Answer 2

建议避免使用JavaScript样式。最好使用Angular Way。使用@ViewChildren和Renderer2类。

https://stackblitz.com/edit/angular-2qtml4

LI的click事件后更改元素的样式

2 个答案: