如何在角度2+中使用具有条件的多个类

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在角度2+中使用具有条件的多个类相关的知识,希望对你有一定的参考价值。

我试图在[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应用程序获取数据,有什么替代方法可以做到这一点?谢谢

答案

无需使用{{}}[ngClass],所以只需删除它。

试试这个 -

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

使用[ { key: class}[ expression ]]处理多种情况

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

以上是关于如何在角度2+中使用具有条件的多个类的主要内容,如果未能解决你的问题,请参考以下文章

这些角度电子邮件指令代码片段如何连接

在 Android 中使用具有多个布局的单个片段

如何使用具有离子和角度的照片相机在firebase中同时保存多个图像

如何一个接一个地打开同一片段但具有不同数据的多个实例?

具有相同布局的多个片段

如何合并两个或多个具有不同 where 条件的查询?我必须重用在第一个代码中使用的代码