Question

我目前正在将待办事项应用程序构建为一个学习项目。当我显示待办事项列表时，如果任务已完成，我希望列表项的背景为绿色，否则为红色。

当前列表如下：

这是我的.html：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-12 col-sm-12">
            <ul class="event-list"  *ngFor="let todo of todoList">
                <li>
                    <time datetime="">
                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>
                        <span class="month">{{todo.dueDate | date:'LL'}}</span>
                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>
                        <span class="month">{{todo.taskCompleted}}</span>
                    </time>

                    <div class="info">
                        <h2 class="title">{{todo.taskName}}</h2>
                        <p class="desc">{{todo.extraNote}}</p>
                    </div>
                    <div class="social">
                        <ul>
                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>
                            </li>
                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>
                            </li>
                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

所以我的想法是如果todo布尔值为true，则循环遍历，然后为绿色，否则为红色。但是我找不到完成它的方法...

编辑：我已将此添加到我的.css：

.green {
    background-color: rgb(39, 142, 255);
}

这是我当前的.html：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-12 col-sm-12">
            <ul class="event-list" *ngFor="let todo of todoList">
                <li
                        *ngFor="let todo of todoList"
                    [ngClass]="todo.taskCompleted ? 'green': 'red'">

                    <time datetime="">
                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>
                        <span class="month">{{todo.dueDate | date:'LL'}}</span>
                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>
                        <span class="month">{{todo.taskCompleted}}</span>
                    </time>

                    <div class="info">
                        <h2 class="title">{{todo.taskName}}</h2>
                        <p class="desc">{{todo.extraNote}}</p>
                    </div>
                    <div class="social">
                        <ul>
                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>
                            </li>
                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>
                            </li>
                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <!---<li>
                    <time datetime="">
                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>
                        <span class="month">{{todo.dueDate | date:'LL'}}</span>
                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>
                        <span class="month">{{todo.taskCompleted}}</span>
                    </time>

                    <div class="info">
                        <h2 class="title">{{todo.taskName}}</h2>
                        <p class="desc">{{todo.extraNote}}</p>
                    </div>
                    <div class="social">
                        <ul>
                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>
                            </li>
                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>
                            </li>
                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>
                            </li>
                        </ul>
                    </div>
                </li>--->
            </ul>
        </div>
    </div>
</div>

Answer 1

您可以为两种情况创建两个不同的CSS类，然后使用ngClass并根据条件todo.taskCompleted提供该类：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-offset-12 col-sm-12">
      <ul class="event-list">
        <li 
          *ngFor="let todo of todoList"
          [ngClass]="todo.taskCompleted ? 'green': 'red'">
          ...
        </li>
      </ul>
    </div>
  </div>
</div>

请注意，如果[ngClass]="todo.taskCompleted ? 'green': 'red'"解析为green时将应用todo.taskCompleted的CSS类的true语法，否则将应用red的CSS类。 / p>

您现在要做的就是创建两个名为red和green的CSS类。

PS -我在*ngFor而非li上添加了ul，因为这是我们需要重复的地方。

这是您推荐的Sample StackBlitz。

角度设置颜色取决于是对还是错

1 个答案: