Dynamically change class

Asked

Viewed 431 times

2

I have an html with 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>

I make a request to see if this count.NAME has data in the database, if it does not have, the name will be in the text-light class, but if it has data, it will be in 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)
      )

    }

but the names are only getting the text-Danger class, and one of them should stick with text-light. Someone could help me?

javascript angularjs angular typescript

4 answers

4

Well try to use the ng-class with the if ternary . 

<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>

  • gave error: ERROR Error: Uncaught (in Promise): Error: Template parse errors: Parser Error: Missing expected : at column 10 in [{redName == true ? 'text-Danger' : 'text-light'}]

  • edited the answer in case of error let me know

  • did not give error, but did not change the color

2

You are changing a variable redName that is being used in an entire array returned in the service. Getting all Danger or light class. For you to compare each item separately, it would be interesting to put a temporary attribute.

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;

},

then in your html:

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

1


I found the ideal solution with the help of @Gaspar’s reply

I created a global array and pushed the contributors data and added 1 more data:

  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;
  }

and in html left:

  <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

Try it this way:

<p [ngClass]="{
     'text-danger': redName,
     'text-light': !redName 
}" >

  • the two names turned red

Browser other questions tagged javascript angularjs angular typescript

You are not signed in. Login or sign up in order to post.