Angular：单击按钮添加和更改类

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"