Angular 5 - ngClass - 无法添加多个类

Question

开始学习Angular 5并且遇到了bitMask = bitMask / 0xf; //bitMask is now 0x1010 //do some bit manipulation with bitmask //get nybbleMask == 0xc (0b1010) 指令。我试图根据条件应用多个类，但不知何故只应用了1/2类。

mainnav.component.html

math.h

mainnav.component.ts

ngClass

条件似乎工作正常，但我不确定为什么没有添加一个类，如下面的截图所示，

有人知道我对<nav class="navbar navbar-expand-lg fixed-top" [ngClass]="{ 'navbar-dark bg-dark' : themeColor === 'dark', 'navbar-dark bg-primary' : themeColor === 'blue', 'navbar-light bg-light' : themeColor === 'light' }"> ... ... <li class="nav-item"> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" (keyup)="onButtonClicked($event)"> <button class="btn btn-outline-success my-2 my-sm-0" [disabled]="!allowSearch" type="submit">Search</button> </form> </li> <li class="nav-item dropdown" (mouseover)="openDropDown($event)"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Change Theme </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#" (click)="enableDarkTheme()">Dark</a> <a class="dropdown-item" href="#" (click)="enableLightTheme()">Light</a> <a class="dropdown-item" href="#" (click)="enableBlueTheme()">Blue</a> </div> </li> 的使用是否错误？

Answer 1

Angular GitHub回购中有一个previous bug report关于这个话题。

原因是[ngClass]会为解析为true的类添加类，并为那些解析为false的类添加类。您在多种情况下使用相同的类来创建问题。