Question

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

如果 [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 指令会重置动态类值。

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

1 个答案: