使用带有空格的Ng类面临的问题

Question

我尝试使用引导程序中的徽章在数据表中运行ngclass，但该类中包含空格，因此该类无法正常工作，然后我从Google那里得到了一些东西，但仍无法正确应用。 我的代码：

<td>
  <div class="badge"
    [ngClass]="{'badge badge-primary': material.submitedStatus=='Open','badge badge-warning': material.submitedStatus=='Region Head Approved'}></div>
</td>

当我检查特定标签时，我可以看到最后应用的类没有徽章图标，因为正确的类是“徽章徽章主要”。

 <div _ngcontent-rey-c5="" class="badge-primary" ng-reflect-klass="badge" ng-reflect-ng-class="[object Object]">Open</div> 

Answer 1

欢迎使用StackOverflow。

我们最终希望同时应用徽章和徽章主要/徽章警告类

这是使它工作的方式。

<td>
  <div class="badge"
    [ngClass]="{'badge-primary': material.submitedStatus=='Open','badge-warning': material.submitedStatus=='Region Head Approved','badge': material.submitedStatus==('Region Head Approved' || 'Open')}>
    </div>
</td>

让我知道是否可行。

Answer 2

.badge被删除，因为当.badge的值为.badge-warning

时，角度未设置类material.submitedStatus（包括'Region Head Approved'）

您需要在.badge-primary中命名属性.badge-warning和[ngClass]。

<td>
  <div class="badge"
    [ngClass]="{'badge-primary': material.submitedStatus=='Open','badge-warning': material.submitedStatus=='Region Head Approved'}"></div>
</td>