Css Angular 6：如果布尔值为true，则为附加类

我正在尝试实现一个投票系统，在这个系统中，主动投票的背景是蓝色的。为此，我使用2个布尔值来跟踪分数和所选选项。我试着使用NgClass，但我似乎不知道它在我的例子中是如何工作的，因为我在现有的2个类中添加了一个额外的类

css

HTML

投票类和noSelect应始终处于活动状态，但单击increaseUpvote应将activeVote类添加到该类中，因为UpVote布尔值将为true。同样的事情也应该发生在否决权选项上

 <p style="font-size: 28px;">{{post.upvotes}}
          <mat-icon class="voting noSelect" (click)="increaseUpvote()">arrow_upward
          </mat-icon>
          <mat-icon class="voting noSelect" (click)="increaseDownvote()">
            arrow_downward
          </mat-icon>
        </p>

---

我认为您要查找的内容包含在Angular的基本模板语法中

如果Upvote为true，则将添加类activeVote

<div [class.activeVote]="upvoted">

如果upvoted为false，这将添加类activeVote

<div [class.activeVote]="!upvoted">

---

有关更多参考资料，我认为Angular的基本模板语法中包含了您要查找的内容

如果Upvote为true，则将添加类activeVote

<div [class.activeVote]="upvoted">

如果upvoted为false，这将添加类activeVote

<div [class.activeVote]="!upvoted">

更多参考