Angular中为*ngFor首个元素设默认类及样式绑定问题解惑

问题回顾 #

你遇到的场景很典型：想让侧边栏第一个菜单项默认带.bg激活类，点击其他项时切换激活状态，已经实现了点击切换，但一开始不知道怎么设置默认激活；后来通过change变量判断是否未点击过菜单，结合索引i定位第一个项，写出了可行代码，但又发现调换<a>标签上两个[class.bg]的顺序后功能失效，想搞清楚原因。

先贴一下你已经验证可行的代码：

<li class="nav-item" [class.bg]="change === true && i==0 ">
  <a class="nav-link " [class.bg]="temp===cat" (click)="clicked(cat)" href="#">{{cat}}</a>
</li>

而调换顺序后失效的代码是：

<a class="nav-link " [class.bg]="temp===cat" [class.bg]="change === true && i==0 " (click)="clicked(cat)" href="#">{{cat}}</a>

核心原因：Angular属性绑定的顺序覆盖机制 #

这里的关键在于Angular对同一元素的同一类绑定，是按照代码书写顺序执行后覆盖的——后面的绑定表达式结果会直接覆盖前面的。

我们拆解两种顺序的执行逻辑：

1. 正常生效的顺序（把默认判断放在<li>上）：
   两个[class.bg]分别作用在<li>和<a>上，互不干扰。默认状态下change为true且第一个项i=0，<li>的.bg生效；当你点击其他菜单项时，change会被设为false，<li>的.bg消失，同时temp会被赋值为点击的cat，对应<a>的.bg生效，逻辑完美衔接。

2. 调换<a>上两个绑定顺序后失效的逻辑：

   • 默认状态：change=true且i=0，但你把[class.bg]="temp===cat"写在了后面。此时默认temp不等于第一个cat（还没点击过），这个表达式结果是false，它会直接覆盖前面change === true && i==0的true结果，导致第一个<a>的.bg类被“冲掉”，看起来默认激活失效了。
   • 点击后：change变为false，前面的表达式结果是false，后面的temp===cat对应点击项为true，所以点击的项会有.bg，但默认激活的效果已经没了，整体就显得功能失效。

简单总结：同一元素上的同一类绑定，后写的表达式优先级更高，会完全覆盖前一个的结果，这就是顺序调换后失效的根本原因。

内容的提问来源于stack exchange，提问作者codefreaK