javascript - ngClass 没有同时显示 2 个类

Question

我有一个 ngClass 指令，它不显示所声明的两个类，只显示其中一个。我通过 { className: condition, className2: condition } 调用了这些类。这些应该在满足某些非排他性条件时显示，但我无法同时看到它们(它应该显示两个小“!”标记，每个类一个)

ngClass 指令

<div class="custom-table-row" *ngFor="let item of list;" (click)="select( item, $event )" (dblclick)="view( item )"
[ngClass]="{ 'active': action.exists( item ),  'notificationempaque': tieneEmpaque( item ),   'notificationauto': item.actividadPendiente( auth.user.id )}" >

这里的 2 个类是 notificationempaque 和 notificationauto:

这是 css 样式表:

.table-custom .custom-table-row.notification:before {
  content: "";
  position: absolute;
  background-image: url(../img/icons/notification_icon.svg);
  z-index: 1;
  width: 15px;
  height: 15px;
  left: 1px;
  top: 6px;
  margin: auto;
  -webkit-animation: wobble-ver-left 0.8s infinite forwards;
  animation: wobble-ver-left 0.8s infinite forwards;

两者相同，但其中一个的起始位置不同，因此它们不重叠。

我试过用不同的方式编写它，使用 2 个 ngClases，并为它创建一个样式表

.table-custom .custom-table-row.notificationauto.notificationempaque

但似乎没有任何效果。

Answer 1

你的问题是你想对一个元素应用两个 :before 选择器。这是不可能的。每个元素只能有一个 :before 和一个 :after 选择器。

你现在只是覆盖它。

为此，我建议您将一个 div 包裹在另一个 div 中并将 :before 应用于不同的 div。

或

省略 :before 并通过 JavaScript 而不是 CSS 添加图像。