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

Question

我开始学习Angular。但是我遇到了一些麻烦，我需要你的知识。当我单击按钮时，如何增加或减少数组“ arrayPost”中包含的变量“​​ loveIts”的数量？

然后，当我增加或减少电话号码时，该怎么做才能更改[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"