Angular 9 - ngClass 在生产环境中无法正常工作

Question

我有一个 [ngClass] 似乎在我的本地环境中正常工作，但在生产环境中却没有。 我无法复制该问题，因为它适用于本地环境，但如果我使用开发工具在 prod 上进行调试，我可以看到它确实应用了 class 但随后将其删除。

如果 [ngClass] 在 PROD 上无法正常工作，那么替代方法可能是什么？

CSS

#main .drawing-select {
  min-width: 285px;
  margin-bottom: 15px;
}

#main .highlight {
  border: 3px solid  #66bb6a;
}

HTML

<div cdkDropList class="drawing-select-container" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let c of configs;let i = index" cdkDrag>
    <mat-card [ngClass]="outLine(c.UpdatedTimestamp)" (click)="selectConfig(i)" fxLayout="column"  fxLayoutAlign="center center"
      @fadeInAnimation>
      <img src="{{ c.SignedUrl }}&width=200&height=150" />
      <span>{{c.Content.Title}}</span>
    </mat-card>
  </div>
</div>

TS

 public outLine(timeStamp: Date): any {
    const date = new Date();
    const currentDate = moment(date, 'YYYY-MM-DD').add(-2, 'd').toDate();
    timeStamp = moment(timeStamp, 'YYYY-MM-DD').toDate();

    const value = timeStamp >= currentDate ? true : false;
    return {
      'highlight': value,
      'drawing-select': true
    };
}

Answer 1

尝试[class.className]= ，例如：

<mat-card [class.drawing-select]="true" [class.highlight]="outLine(c.UpdatedTimestamp)['highlight']" (click)="selectConfig(i)" fxLayout="column" fxLayoutAlign="center center" @fadeInAnimation>
  <img src="{{ c.SignedUrl }}&width=200&height=150" />
  <span>{{c.Content.Title}}</span>
</mat-card>

另一方面，有时fxLayoutAlign指令会重置动态 Class 值。