Question

我正在尝试实施一种投票系统，在该系统中，有效投票的背景为蓝色。为此，我使用2个布尔值来跟踪得分和所选选项。我尝试使用NgClass，但由于要在现有的2个类中添加一个额外的类，因此我似乎无法弄清楚它的工作方式。

css

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

HTML

投票类和noSelect应该始终处于活动状态，但是单击crementUpvovo（）应该将activeVote类添加到该类中，因为被投票的布尔值将为true。 downvote选项应该发生相同的事情。

 <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”为true，这将添加“ activeVote”类

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

，如果“ upvoted”为假，则会添加“ activeVote”类

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

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

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

1 个答案: