时间戳

首页 > 解决方案 > 在ngclass属性Angular中使用默认类

angular - 在ngclass属性Angular中使用默认类

问题描述

我有一个跨度，需要根据其中的值更改其类。

所以我遵循这样的ngclass方式

<span class="badge " [ngClass]="{'bg-info':item.LifeCycle==='Pipeline',
'bg-primary':item.LifeCycle==='In Progress','bg-warning':item.LifeCycle==='In Close-Down'}">
{{item.LifeCycle}}</span>

但我的问题是，如果 3 个表达式之外的值不同，则内容似乎不可见，因为似乎没有分配任何类。

那么如何在没有任何表达式的情况下在ngClass中设置一个默认类

标签： angular

解决方案

您正在尝试在 ngClass 中实现 switch-case，而 ngClass 只为每个“CSS 类”提供多个 if 语句。这应该通过开关在组件类而不是模板中处理。

<span class="badge " [ngClass]="getBadgeClass(item.LifeCycle)">
{{item.LifeCycle}}</span>

在组件中，您可以使用 switch 语句。

    public getBadgeClass(lifeCycle) {
      switch lifeCycle {
      case 'Pipeline' : // all cases  
        return 'bg-primary';
      default: 
        return 'what ever is the default class';
      }
   }

推荐阅读