时间戳

首页 > 解决方案 > 将多个 div（类）绑定到 Angular 中的动态值

angular - 将多个 div（类）绑定到 Angular 中的动态值

问题描述

在 td 内部，我想使用根据获取的值动态变化的步骤进度条。我可以在 td 中放置步骤进度条，但它是静态的。我没有得到如何动态绑定此步骤进度条。接受和拒绝是获取的值。这是它的外观：在此处输入图像描述包含步骤进度条的最后一个 td 正是我想要动态绑定的。请随时询问是否需要其他任何内容？代码html：

<td  style="border-right:1px solid aquamarine;"[class.dot]="user.Manager.status === 'Accepted'"
[class.bluedot]="user.Manager.status === 'rejected'">
  {{user.Manager.status}}
</td>

CSS：

 .dot{
 overflow: hidden;
 margin-top:10px;
 position: relative;

width: 10px ;
height: 10px ;
border-radius:50%;
background: #66ac3c;
color: white;
text-align: center;

}

步骤进度条的css：

.line {
width: 100%;
float: float;
margin-top:5px;
border-bottom: 1px solid aquamarine;

}

.steps {
box-shadow: 0 0 3px #888;
width: 10px;
height: 10px;
border-radius:50%;
background: #66ac3c;
color: black;
text-align: center;
z-index: 10;
}

标签： angular

解决方案

我认为这必须有效-如果 user.Manager.status 被接受并被拒绝（请参阅上下字母）。任何可以使用 ngClass 的方式

<td  style="border-right:1px solid aquamarine;" 
     [ngClass]="{'dot':user.Manager.status === 'Accepted',
                 'bluedot':user.Manager.status === 'rejected'}">
  {{user.Manager.status}}
</td>

推荐阅读