Angular 6: Дополнительный класс, если логическое значение истинно - PullRequest
Новая
       8

Angular 6: Дополнительный класс, если логическое значение истинно

0 голосов
/ 06 мая 2019

Я пытаюсь внедрить систему голосования, где активный голос получает синий фон. Для этого я использую 2 логических значения, чтобы отслеживать счет и выбранную опцию. Я пытался использовать NgClass, но я не могу понять, как он работает в моем случае, так как я добавил бы дополнительный класс к существующим 2 классам.

CSS 

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

HTML

голосующий класс и noSelect всегда должны быть активными, но нажатие увеличенияUpvote () должно добавить к нему класс activeVote, поскольку логическое значение upvoted будет истинным. То же самое должно произойти с опцией 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;
    }
  }

1 Ответ

2 голосов
/ 06 мая 2019

Я думаю, то, что вы ищете, включено в базовый синтаксис шаблона Angular.

это добавит класс "activeVote", если "upvoted" равно true 

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

, и этодобавьте класс "activeVote", если "upvoted" имеет значение false 

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

для дополнительной справки https://angular.io/guide/template-syntax#binding-targets

...