ngClass 不影响任何东西答案

【问题标题】：ngClass not affecting anythingngClass 不影响任何东西
【发布时间】：2019-05-06 21:02:35
【问题描述】：

我正在使用 Angular 7。我得到了这些 CSS 声明：

.carddiv
{
    margin: 0 auto;
    width: 75%;
    cursor: pointer;
}
.gameMessages
{
    text-align: center !important;
    font-size: 3em !important;
}
.messageSuccess
{
    color : green;
}

.messageFailure
{
    color: red;
}

这是 HTML：

<section class="carddiv">
   <section class="gameMessages">
       <p [ngClass] = "{'messageSuccess':booli === true,
                        'messageFailure':booli === false}">{{currentMoveMessage}} </p>
</section>
<mat-card class="cardclass" [attr.data-index]="i" *ngFor="let card of cards; index as i"  (click)="onCardClick($event)">
  <mat-card-header class="cardheader">
    <mat-card-title> a card </mat-card-title>
  </mat-card-header> 
  <img [src]="cards[i].pathToShow">
</mat-card>
</section>

在组件的类中：

export class CardcomponentComponent implements OnInit 
{
  booli : boolean;
  currentMoveMessage : string;

  constructor(public cardService: CardService) 
  { 
    this.booli = true;
    this.currentMoveMessage = "message";
    ...
  }
...

当我加载页面时，文本的颜色没有影响。当我直接使用样式时，它可以工作，这意味着这样做时：

<p style="color:red"> {{currentMoveMessage}} </p>

ngClass 有什么问题？

【问题讨论】：

这里肯定有更多内容，只是在堆栈闪电战中重新创建似乎很好。请编辑更多代码。
它与样式一起使用的部分直接让我感到困惑......
^^ 我猜测问题的可读性，Yon，是正确指向 css 的组件，您可以使用正常使用的类之一，即。 class="消息成功"。这可能是语法看起来正确的问题
也许可以试试 .gameMessages { text-align: center !important;字体大小：3em！重要； } 可能有其他样式干扰？
哈，那行得通..为什么我不能进行 booli === true 比较？

标签： angular angular7 ng-class

【解决方案1】：

看看你是否能够在这个stackblitz中重现相同的内容

您还应该在ngOnInit() 上设置this.booli = true; 而不是构造函数，构造函数是打字稿功能，ngOnInit 在组件初始化时运行，您是否从CardService 获得booli？

【讨论】：

这太奇怪了，因为当我更改为您编写的第二种方式时，它起作用了，但是当我回到我在问题中使用的方式（以前不起作用）时，它只是保持工作..
messageSucess 和 booli 之间是否缺少空格？in "{'messageSuccess':booli === true
也许尝试设置 this.booli = true;在 ngOnInit() 而不是构造函数上？

【解决方案2】：

您的代码的第一部分没有问题。在这里检查：

https://stackblitz.com/edit/angular-kur9tf

我只是做了一个复制和粘贴。它没有问题。

【讨论】：