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

Question

我正在尝试实现一个投票系统，其中活跃投票的背景为蓝色。为此，我使用 2 个布尔值来跟踪分数和所选选项。我尝试使用 NgClass，但我似乎无法弄清楚它在我的情况下是如何工作的，因为我会在现有的 2 个类中添加一个额外的类。

CSS

 .voting{
    cursor: pointer; 
    display: inline;
  }
  .activeVote{
    background: #2980b9;
  }

超文本标记语言

投票类和 noSelect 应始终处于活动状态，但单击increaseUpvote() 应将 activeVote 类添加到该类，因为 upvoted 布尔值将为 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>

打字稿

  public upvoted: boolean = false;
  public downvoted: boolean = false;

  increaseUpvote(): void {
    if (this.downvoted) {
      this.post.upvote();
      this.downvoted = false;
    }
    if (!this.upvoted) {
      this.post.upvote();
      this.upvoted = true;
    } else if (this.upvoted) {
      this.post.removeUpvote();
      this.upvoted = false;
    }
  }

  increaseDownvote(): void {
    if (this.upvoted) {
      this.post.removeUpvote();
      this.upvoted = false;
    }
    if (!this.downvoted) {
      this.post.removeUpvote();
      this.downvoted = true;
    } else if (this.downvoted) {
      this.post.upvote();
      this.downvoted = false;
    }
  }

Answer 1

我认为您正在寻找的内容包含在 Angular 的基本模板语法中。

如果“upvoted”为真，这将添加“activeVote”类

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

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

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

更多参考https://angular.io/guide/template-syntax#binding-targets