Угловой: добавить и изменить класс, нажав на кнопку

Question

Я начинаю изучать Angular.Но у меня есть некоторые проблемы, и мне нужны ваши знания.Как я могу увеличить или уменьшить количество моей переменной «loveIts», содержащейся в моем массиве «arrayPost», когда я нажимаю на мои кнопки?

Тогда, когда я увеличу или уменьшу свой номер, что мне нужно сделать, чтобы изменить свой [ngClass]?Я уже подготовил свою функцию "btnLove" и "btnNotLove".

app.component.html:

<h2>{{mainTitle}}</h2>
<ul class="list-group">
  <app-post *ngFor="let i of arrayPost"
  [postLoveIts]="i.loveIts"></app-post>
</ul>

app.component.ts:

arrayPost = [
    {
      loveIts: -1,
    },
    {
      loveIts: 1,
    },
    {
      loveIts: 0,
    }
  ];

post.component.html:

<li [ngClass]="{'list-group-item': true,
                'list-group-item-danger': postLoveIts < 0,
                'list-group-item-success': postLoveIts > 0}">

  <button type="button" class="btn btn-success" (click)="btnLove">Love it !</button>

  <button type="button" class="btn btn-danger" (click)="btnNotLove">Don't love it !</button>

</li>

post.component.ts:

  @Input() postLoveIts: number;

  btnLove() {

  }

  btnNotLove() {

  }

Answer 1

Я не совсем уверен, что понимаю вашу проблему, но моя интуиция говорит, что вы хотите этот кусок кода

<li class="list-group-item" 
    [class.list-group-item-danger]="postLoveIts < 0"
    [class.list-group-item-success]="postLoveIts > 0"