ngClass не влияет ни на что - PullRequest
Новая
       18

ngClass не влияет ни на что

0 голосов
/ 07 мая 2019

Я использую 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?

Ответы [ 2 ]

0 голосов
/ 07 мая 2019

Первый раздел вашего кода не имеет проблем. Проверьте здесь:

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

Я только что сделал копию и вставил. Работает без проблем.

0 голосов
/ 07 мая 2019

Посмотрите, сможете ли вы воспроизвести то же самое в этом stackblitz

также вы должны установить this.booli = true; на ngOnInit() вместо конструктора, конструктор - это функция машинописи, ngOnInit запускается при инициализации компонента, получаете ли вы booli от CardService?

...