Angular中ng-switch下<a>标签重复渲染问题排查

我来帮你搞定这个问题！你遇到的核心问题是***ngSwitchCase的写法不符合Angular模板的语法规则**，导致ngSwitch没有正确执行匹配逻辑，最终两个<a>标签都被渲染出来了。

问题根源 #

在Angular模板中，如果你直接写*ngSwitchCase="A"，Angular会把A当成组件类中定义的变量/属性去解析，而不是你想要的字符串字面量"A"。如果你的组件里没有定义名为A或B的变量，或者这些变量的值和element.anyValue不匹配，ngSwitch就无法正确匹配，甚至会出现所有case都被渲染的异常情况。

修正后的代码 #

只需要给*ngSwitchCase的字符串值加上单引号，让Angular把它当作字面量处理即可：

<li *ngFor="let element of account.collection" >
  <div [ngSwitch]="element.anyValue">
    <a *ngSwitchCase="'A'" [routerLink]="['../A', element.id ]"><span>One</span></a>
    <a *ngSwitchCase="'B'" [routerLink]="['../B', element.id ]"><span>Two</span></a>
    <!-- 可选：添加默认case，避免没有匹配项时无内容 -->
    <ng-container *ngSwitchDefault>
      <span>无匹配项</span>
    </ng-container>
  </div>
</li>

额外检查点 #

除了语法修正，你还可以确认以下几点，确保逻辑完全正常：

• 确认element.anyValue的实际值是字符串类型的"A"或"B"，注意大小写要完全匹配（比如不要出现小写"a"和大写"A"不匹配的情况）
• 如果element.anyValue是数字或其他类型，要保证*ngSwitchCase的匹配值类型一致（比如如果是数字1，就写*ngSwitchCase="1"，不需要加引号）

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