Question

我必须在我的角度4项目中根据状态条件将我的4个可用课程（黄色，绿色红色和白色）中的一个课程应用到我的 div 。< / p>

<div *ngIf="item.status=='pending'; then yellow 
elseif item.status=='completed'; then green ... else white">
div content...
</div>

上述陈述中只有一个条件可以成立。

如何实现这一点（if elseif elseif ...在angular4中的else语句）？

Answer 1

使用ngClass

<div [ngClass]= { 
    'yellow-class' : item.status =='pending', 
    'green-class' : item.status == 'completed', 
    'white-class' : item.status != 'pending' && 'item.status' != 'completed' }>
</div>

使用ngStyle

在标记中：

<div [style.color]=“getStatusColor(item.status)”>
</div>

或

<div [ngStyle]=“{color: getStatusColor(item.status)”>
</div>

在组件中：

getStatusColor(status) {
  switch (status) {
    case ‘pending’:
      return ‘yellow’;
    case ‘completed’:
      return green;
    default:
      return ‘white’;
  }
}

Answer 2

如果这些是类，那么您不需要* ngIf，而是需要ngClass。

像

一样使用它

<div 
  ngClass="{yellow: item.status=='pending',
            green: item.status=='completed',
            white: item.status!='pending' && item.status!='completed'
           }"
>
...
</div>

Answer 3

您还可以从后端逻辑获取类名，如下所示：

<div [ngClass]="GetClassName(item.status)">
    //div content...
</div>

GetClassName(status:string):string{
    let className:string='white';
    if(status=='pending')
    {
        className='green';
    }
    else if(status=='complete')
    {
        className='yellow';
    }
    .......


    return className;
}

if then elseif then then then - statement in Angular 4

3 个答案: