4

Estou usando o ngIF apenas para mudar a cor do objeto, mas eu estou precisando criar uma que o resultado.MediaTotal seja menor que 70 e maior que 50. Qual é a sintaxe correta pra fazer isso: *ngIf="resultado.MediaTotal < 70 and > 50"

<p *ngIf="resultado.MediaTotal > 70" style="color:green">{{resultado.MediaTotal}} </p>

2 Respostas 2

3

Recomendo usar ngClass em vez de ngIf pra estilizar seus componentes dinamicamente. Vamos imaginar um cenário onde você tem vários estilos, você teria que fazer vários componentes iguais mudando apenas o estilo deles, isso é uma má prática pois você está repetindo código.

Exemplo:

<p [ngClass]="getClass()">{{resultado.mediaTotal}}</p>

Note que não estamos fazendo nenhuma validação no html, podemos deixar essa parte pro component, onde nesse exemplo criei a função getClass()

No seu Component/Page você faria algo como:

 getClass(){
    if(this.resultado.mediaTotal > 50 && this.resultado.mediaTotal < 70)
      return 'my-style-green'
    if(this.resultado.mediaTotal < 50)
      return 'my-style-red'
  }

Note que ele está retornando uma string, essa string é sua classe que você pode colocar no css da sua página.

.my-style-green{
     color: green;
 }
 .my-style-red{
     color: red;
 }
3

Você deve utilizar o operador lógico &&

<p 
    *ngIf="resultado.MediaTotal > 50 && resultado.MediaTotal < 70"
    style="color:green">
        {{resultado.MediaTotal}
</p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .