Angular “我想要改变”；李",；有角度的背景色

我有一个由Angular制作的待办应用程序。数据来源于。我希望当我按下“完成”按钮时，“li”的背景色也会改变。我该怎么做

这是Html

<input
  (keyup.enter)="createPost(title)" #title
  type="text" class="form-control">
<ul class="list-group">
  <li
  *ngFor="let post of posts"
  class="list-group-item">
  <button
    (click)="updatePost(post)"
    class="btn btn-success btn-sm" id="button">
    {{post.completed ? 'Done' : 'Not ready'}}
  </button>
  <button
    (click)="editPost(post)"
    class="btn btn-dark">
    Edit
  </button>
  <button
    (click)="deletePost(post)"
    class="btn btn-danger">
    Delete
  </button>
  {{ post.title }}
  </li>
</ul>

---

使用ngClass根据post状态切换类

<input
  (keyup.enter)="createPost(title)" #title
  type="text" class="form-control">
<ul class="list-group">
  <li
  *ngFor="let post of posts"
  [ngClass]="post.completed?'list-group-item list-group-item-success':'list-group-item'">
  <button
    (click)="updatePost(post)"
    class="btn btn-success btn-sm" id="button">
    {{post.completed ? 'Done' : 'Not ready'}}
  </button>
  <button
    (click)="editPost(post)"
    class="btn btn-dark">
    Edit
  </button>
  <button
    (click)="deletePost(post)"
    class="btn btn-danger">
    Delete
  </button>
  {{ post.title }}
  </li>
</ul>

{{post.completed？'Done'：'notready'}
编辑
删除
{{post.title}}

您可以使用ngClass更新li的颜色。[ngClass]=“{'highlight-post'：post.completed}”

<input
  (keyup.enter)="createPost(title)" #title
  type="text" class="form-control">
<ul class="list-group">
  <li
  *ngFor="let post of posts"
  [ngClass]="post.completed?'list-group-item list-group-item-success':'list-group-item'">
  <button
    (click)="updatePost(post)"
    class="btn btn-success btn-sm" id="button">
    {{post.completed ? 'Done' : 'Not ready'}}
  </button>
  <button
    (click)="editPost(post)"
    class="btn btn-dark">
    Edit
  </button>
  <button
    (click)="deletePost(post)"
    class="btn btn-danger">
    Delete
  </button>
  {{ post.title }}
  </li>
</ul>