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

Question

在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;
}

Answer 1

我认为这必须可行-如果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>

Answer 2

它也将作为

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