2

Tenho um html com ngFor:

<div class="row p-3 border-bottom" *ngFor="let cont of contrib">
  <!-- ! -->
  <div class="col">
    <p [class.text-danger]="redName === true" [class.text-light]="redName === false">{{cont.NOME}}</p>
  </div>
  <!-- ! -->    
</div>

Faço uma requisição para ver se esse cont.NOME possui dados no banco, se caso não possuir, o nome ficara com a class text-light, mas se tiver dados, ficara com text-danger:

for (let index = 0; index < colabs.length; index++) {

      this.service.showResults(colabs[index].FILIAL, colabs[index].MATRICULA).subscribe(
        (res) => {
          let cont = (<any>res).length

          if (cont > 0) {
            //nome fica vermelho
            this.redName = true;

          } else {
            this.redName = false;
          }       

        },
        (err) => console.log(err)
      )

    }

mas os nomes só estao ficando com a class text-danger, sendo que um deles deveria ficar com text-light. Alguem poderia me ajudar?

4 Respostas 4

4

Bom tente utilizar o ng-class com o if ternario .

<div class="row p-3 border-bottom" *ngFor="let cont of contrib">
  <!-- ! -->
  <div class="col">
    <p ng-class="redName ? 'text-danger' : 'text-light'" >        {{cont.NOME}}</p>
  </div>
  <!-- ! -->    
</div>    
3
  • deu erro: ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Missing expected : at column 10 in [{redName == true ? 'text-danger' : 'text-light'}]
    – Maria
    Commented 17/06/2019 às 17:08
  • editei a resposta, caso de erro me avise Commented 17/06/2019 às 17:13
  • nao deu erro, mas nao mudou a cor
    – Maria
    Commented 17/06/2019 às 17:19
2

Você está alterando uma variável redName que está sendo utilizada num array inteiro retornado no serviço. Ficando todos com classe danger ou light. Para que você compare cada item isoladamente, seria interessante colocar um atributo temporário.

no ts:

(res) => {
    const cont = res.length

    if (cont > 0) {
        //nome fica vermelho
        colabs[index]._redName = true;
    } else {
        colabs[index]._redName = false;
    } 

    // ou apenas:
    // colabs[index]._redName = cont > 0;

},

entao no seu html:

<div class="col">
    <p [class.text-danger]="cont._redName" [class.text-light]="!cont._redName">{{cont.NOME}}</p>
</div>
2

Achei a solução ideal com a ajuda da resposta do @Gaspar

Eu criei uma array global e fiz um push com os dados do colaboradores e adicionei mais 1 dados:

  this.arrayColabs.push({
    MATRICULA: colabs[index].MATRICULA,
    CCT: colabs[index].CCT,
    NOME: colabs[index].NOME,
    FILIAL: colabs[index].FILIAL,
    _redName: true
  })
  let cont = (<any>res).length

  if (cont > 0) {
    //nome fica vermelho
    this.arrayColabs[index]._redName = true;
  } else {
    this.arrayColabs[index]._redName = false;
  }

e no html deixei:

  <div class="row colaboradores" *ngFor="let cont of arrayColabs">

      <div class="col">
        <p [class.text-danger]="cont._redName" [class.text-light]="!cont._redName">{{cont.NOME}}</p>        
      </div>
      <div class="col">
        <button class="btn-primary btn button_visu" (click)="select(cont.FILIAL, cont.MATRICULA)">Visualizar</button>
      </div>
    </div>
0

Tenta assim:

<p [ngClass]="{
     'text-danger': redName,
     'text-light': !redName 
}" >     
1
  • os dois nomes ficaram vermelho
    – Maria
    Commented 18/06/2019 às 11:13

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 .