ngClass和印刷媒体查询无法一起使用

Question

我正在制作一个角度组件来制作一堆二维码并打印它们。我有一个仅用于二维码的组件，并希望能够从列表中删除二维码并撤消删除以前删除的代码。 I在添加撤消删除功能之前，一切工作正常，因为我只是从列表中删除了该特定组件。但是，现在我不想完全删除它，我只想淡出它直到打印时间。我在div上使用ngClass，“已删除”的类确实起作用。任何具有noPrint类的东西都只会得到display：none，但是，当我尝试使用ngClass动态给出代码noPrint时，它并没有设置display：在该特定代码上没有显示。

我的二维码html：问题出在顶部的第一个div标签中。我试过在类名上添加单引号，以查看是否也可以。

<div
  fxLayout="column"
  class="qrobj"
  [ngClass]="{
    deleted: !this.shouldExist,
    noPrint: !this.shouldExist
  }"
>
  <button *ngIf="this.shouldExist" class="noPrint" mat-icon-button>
    <mat-icon
      matTooltip="Delete this Person?"
      matTooltipPosition="after"
      color="warn"
      (click)="sendDelete()"
      >block</mat-icon
    >
  </button>
  <button *ngIf="!this.shouldExist" class="noPrint" mat-icon-button>
    <mat-icon
      matTooltip="Undo Delete?"
      matTooltipPosition="after"
      color="primary"
      (click)="undoDelete()"
      >undo
    </mat-icon>
  </button>
  <div fxLayout="row" class="text">
    <p>{{ person.Name }}</p>
    <p>{{ person.Name }}</p>
  </div>
  <div fxLayout="row" class="images">
    <img [src]="this.qrlink" (error)="getDefaultUrl()" />
    <img [src]="this.piclink" (error)="getDefaultUrl()" />
  </div>
</div>

这是我的CSS的重要部分：

.deleted {
  opacity: 0.3;
}

@media print {
  .noPrint {
    display: none;
  }
}

这是它的样子 在我删除代码之前

这是它的样子 我删除代码后：

这是打印预览中显示的内容：