Question

我有一个由Angular开发的应用程序。数据来自https://jsonplaceholder.typicode.com/todos。我希望当我按下“完成”按钮时，“ li”的背景颜色也将改变。我该怎么办？

这是HTML

android {
configurations.all {   //this piece is important to avoid duplicates
        exclude group: 'com.android.support',
                module: 'support-v4'
    }
}

这是更新功能

<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>

Answer 1

使用ngClass根据发布状态切换课程

<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>

Answer 2

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

我想用Angular更改“ li”背景颜色

2 个答案: