在 ngFor angular 2 中提供活动类 onclick

Posted 2023-02-22

【中文标题】在 ngFor angular 2 中提供活动类 onclick

【英文标题】：give active class onclick in ngFor angular 2

【发布时间】：2017-11-01 09:16:47

【问题描述】：

您好，我有无序列表，它们都有活动类。单击任何列表项时，我想切换活动类。我的代码是这样的

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules" class="active">
    <a> subModule.name </a>
  </li>
</ul>

谁能帮我做这件事？

【参考方案1】：

只需创建一个索引属性。使用let i = index 使用（单击）事件设置索引。然后检查selectedIndex === i是否是设置类“活动”为真

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules; let i = index" 
      [class.active]="selectedIndex === i" 
      (click)="setIndex(i)">
    <a> subModule.name </a>
  </li>
</ul>

然后在打字稿文件上：只需设置 selectedIndex。

export class ClassName 
   selectedIndex: number = null;

   setIndex(index: number) 
      selectedIndex = index;
   

【讨论】：

您的 html 块中有错误。 [class.active]='sIndex === i 而不是 [class.active]='selectedIndex === i。否则，很好的答案:-)

没有切换

正在寻找一个简单的解决方案并找到了这个......谢谢。在恢复到组件逻辑之前，我总是喜欢使用 Angular 的速记模板方法。

【参考方案2】：

你可以这样做：

<ul class="sub_modules">
  <li (click)="activateClass(subModule)"
      *ngFor="let subModule of subModules"
      [ngClass]="'active': subModule.active">
    <a> subModule.name </a>
  </li>
</ul>

在组件上

activateClass(subModule)
  subModule.active = !subModule.active;    

在 Ng 类上，第一个属性是您要添加的类，第二个是条件；

【讨论】：

谢谢@Eduardo .. 这就是我想要的，但所有列表项都应该已经有活动的类.. 那我该怎么做呢？

您可以对数组进行映射。 array.map(obj = > obj.active=false; 返回 obj; )

非常感谢。我用 obj.active=true 做到了...这就是我想要的）它完美地工作）

【参考方案3】：

相信你可以在这里找到答案：AngularJs - Best-Practices on adding an active class on click (ng-repeat)

您可以通过 Angular 的 $index 定位和应用 CSS 到项目/对象。这篇文章比我能更好地解释和演示逻辑。

【讨论】：

对不起，你的回答不是我想要的。

【参考方案4】：

我想补充和澄清一个可能的误解：

您只能通过[ngClass] 添加类。 你不能像:activeselector那样添加选择器。

<li [ngClass]="'active': isActive === true">

注意区别：

.li.active 
  // This works! :)


.li:active 
  // This doesn't work! :(

这对某些人来说可能很明显，但我花了大约 15 分钟的反复试验来理解。