span 元素上的动态 css 类 - angular 4

Question

我在表中有一个跨度元素。 我想根据值动态更改 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 中实现这一目标？

谢谢

Answer 1

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

您可以在 angular 中使用 ngClass 指令。 参数是'class-name':condition ，如果condition为真，则将class-name添加到元素中。

在此处阅读有关 ngClass 的更多信息： https ://angular.io/api/common/NgClass

Answer 2

试试这个方法

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

Answer 3

1) 如果值来自对象中的枚举值怎么办 2) 有没有办法将所有 ngClass 逻辑放在组件方法中并执行以下操作：

 <tbody> <tr *ngFor="let task of tasks"> <td>{{ task.title }}</td> <td>{{ task.description }}</td> <td> <span class="label" [ngClass]="{ getTaskLabel(task) }" >task.taskstate</span> </td> <td> </tr> </tbody>

Answer 4

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

您可以将 ngStyle 属性和三元运算符与我提供的相同