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

表中有一个跨度元素。我想根据该值动态更改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>

水果
颜色


您可以将ngStyle属性和三元运算符与我提供的相同内容一起使用

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


您可以将ngStyle属性和三元运算符与我提供的相同内容一起使用

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

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


试试这种方法

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


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



{{task.title}}
{{task.description}}
task.taskstate
1）如果值来自对象中的枚举值，该怎么办
2） 有没有一种方法可以将所有ngClass逻辑放在一个组件方法中并执行如下操作：



{{task.title}}
{{task.description}}
task.taskstate
他问如何更改类，而不是样式见鬼，现在它甚至都不是angularJS的有效语法，而不是Angular2+。也许这仍然可以用angular2+编译，但它不是标准语法。我不会在代码审查中通过它。ngStyle用于直接修改属性。ngClass用于修改类。不要跨流。他问如何更改类，而不是样式。见鬼，现在它甚至不适用于angularJS的有效语法，而不是Angular2+。也许这仍然可以用angular2+编译，但它不是标准语法。我不会在代码审查中通过它。ngStyle用于直接修改属性。ngClass用于修改类。不要越过小溪。