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

Question

开始学习 Angular 5 并坚持使用 ngClass 指令。我正在尝试根据条件应用多个类，但不知何故只应用了 1/2 个类。

ma​​innav.component.html

<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>

ma​​innav.component.ts

themeColor: string = 'dark';
enableDarkTheme() {
    this.themeColor = 'dark';
  }

  enableLightTheme() {
    this.themeColor = 'light';
  }

  enableBlueTheme() {
    this.themeColor = 'blue';
  }

条件似乎运行良好，但我不确定为什么没有添加一个类，如下面的屏幕截图所示，

有人知道我对ngClass 的使用是否有误吗？

Answer 1

在 Angular GitHub 存储库中有一个关于这个主题的 previous bug report。

原因是[ngClass] 将为解析为true 的类添加类，并为解析为false 的类删除类。您在多个情况下使用相同的类会产生问题。