时间戳

首页 > 解决方案 > 使用 ngClass 的多个类 - Angular 6

html - 使用 ngClass 的多个类 - Angular 6

问题描述

当我只有一个条件时，即'e-card horCard card-OK': var1 == 0多个班级作品。当我在下面有其他条件时，使用与'e-card horCard card-NOK': var1 > 0条件第一部分相同的类，它们根本不应用它们。这里有什么问题？

  <div [ngClass]="{'e-card horCard card-OK': var1 == 0, 'e-card horCard card-NOK': var1 > 0}">
      <div class="card-header">{{'SitesWithProblem' | translate | uppercase}}</div>
      <div class="card-data">{{globalStatistic.TotalSitesWithProblem}}</div>
    </div>

标签： htmlangular

解决方案

您对两种条件都使用相同的类，因此对于第二个条件，它仅显示与第一个条件不同的类，因此使用下面的方式仅根据条件需要的类

<div class="e-card horCard " [ngClass]="{' card-OK': var1 == 0, 'card-NOK': var1 > 0}">
  <div class="card-header">{{'SitesWithProblem' | translate | uppercase}}</div>
  <div class="card-data">{{globalStatistic.TotalSitesWithProblem}}</div>
</div>

或者

<div class="e-card horCard " [ngClass]="(var1 == 0)? 'card-OK' : 'card-NOK'">
  <div class="card-header">{{'SitesWithProblem' | translate | uppercase}}</div>
  <div class="card-data">{{globalStatistic.TotalSitesWithProblem}}</div>
</div>

推荐阅读