Question

我正在尝试为[ngClass]上的多个类选择使用条件：

<td>
<span 
      [ngClass]="{
             'badge badge-success': {{ server.type }} === 'PRODUCTION',
             'badge badge-danger': {{ server.type }} === 'TEST',
             'badge badge-warning': {{ server.type }} === 'DEV'
              }">
</span>
</td>

我知道[ngClass]不适用于{{}}，我是从restapi django应用程序获取数据的，还有另一种方法吗？谢谢

Answer 1

无需将{{}}与[ngClass]一起使用，只需删除它即可。

尝试一下-

 [ngClass]="{
             'badge badge-success': server.type  === 'PRODUCTION',
             'badge badge-danger':  server.type  === 'TEST',
             'badge badge-warning': server.type  === 'DEV'
              }">

Answer 2

使用[ { key: class}[ expression ]]处理多个条件

<span class="badge " ng-class="[{'PRODUCTION':'badge-success', 'TEST':'badge-danger', 'DEV':'badge-warning'}[ server.type]]"></div>

如何在Angular 2+中使用多个带有条件的类

2 个答案: