代码之家 › 专栏 › 技术社区 › yer

跨度元素上的动态CSS类-角度4

ng-class angular css

yer · 技术社区 · 6 年前

我在表中有一个跨度元素。我想根据值动态更改CSS类。

这是我的HTML代码:

    <table>
          <thead>
               <tr>
                  <th>Fruits</th>
                  <th>Colors</th>
               </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of fruits>
             <td>{{data.fruits}}</td>
             <td>
             <span class="badge badge-default badge-success">{{data.color}}</span>
             </td>
           </tr>
          </tbody>
</table>

我想根据我得到的数据显示徽章颜色。例如,如果我变红了,我想把徽章级别改为“徽章危险”。如果我获得了绿色,我想把班级改为徽章成功等等。

如何在角4中实现这一点?

谢谢

3 回复 | 直到 6 年前

Our_Benefactors Wade Anderson 6 年前

<span class="badge badge-default" [ngClass]="{'badge-danger': data.color === 'red', 'badge-success': data.color === 'green' }></span>

'class-name':condition condition class-name

https://angular.io/api/common/NgClass

Chellappan à®µ 6 年前

<span class="badge badge-default" [ngClass]="{
    'badge-success':data.color === 'green',
    'badge-warning':data.color === 'yellow',
    'badge-success-danger':data.color === 'red'
  }">
  </span>

-1

Vaibhav 6 年前

<span class="badge badge-default badge-success" [ngStyle]="data.color =='red' ? {'class': 'badge badge-danger'} : {'class': 'badge badge-success'}"></span>

推荐文章

Kabukki · 在回调中更改条件后,ngClass不更新

7 年前

Janey · ng类在表的第一行上有类,并在ng单击时将其删除

7 年前

Learning-Overthinker-Confused · 如何用角度js有条件地设置特定的类属性?

8 年前

Monochromie · 如何在ng类中用复杂语句设置动态类名?

8 年前

RonE · 使用“角度”单击时更改特定字形图标的颜色

8 年前

Jack Roscoe · 通过表达式应用ng类时,如何正确组合字符串和变量?

9 年前

Faruk Yazici · ng类条件不起作用

9 年前

Deadpool · ng类在角度条件下无法正确渲染

9 年前

Filth · AngularJS|使用ng类的条件类

10 年前

isherwood · 在mouseenter上向相邻元素动态添加类

10 年前