ngFor 循环中的 ngClass，angular 6

Question

I am trying to change the class whit ngClass and ternary operator inside an ngFor, if the boolean value is true i want to use alert-success if the boolean is false i want to use alert-danger. When i insert the firs element true is ok, but when i insert the second element false the first element change in false

ts

tesseraValidita: boolean;

checkCardValitidy(tesserato: any){
    this._dipendentiMandatariService.getTessere(tesserato.idCRM).subscribe((tessera: Tessera[]) => {
      let valid = false;
      let itemValido: Tessera;
      valid = tessera.some((item: Tessera) => {
          itemValido = item;
          return (item.Stato === 'In Essere' && item.Tipo === 'Autorale' && this.moment(item.DataFineValidita).format('YYYY-MM-DD') > this.moment(new Date()).format('YYYY-MM-DD'));
      });
      if (valid) {
          // this.alertService.info('Verificatore ' + tesserato.denominazione + ' Tessera Valida');
          // this.verificaTessera = tesserato.idCRM + 'Tessera Valida Nr: ' + itemValido.Numero + " scadenza il " + this.moment(itemValido.DataFineValidita).format('DD/MM/YYYY');
          this.tessereVerificateArray.push('Tessera Valida Nr: ' + itemValido.Numero + " scadenza il " + this.moment(itemValido.DataFineValidita).format('DD/MM/YYYY'))
          this.tesseraValidita = true;
          //this.className = 'alert-success'
      } else {
          // this.alertService.error('Attenzione! Accertatore ' + tesserato.denominazione  + '  senza tessera in corso di validità');
          //this.verificaTessera = tesserato.idCRM + 'Attenzione! Accertatore senza tessera in corso di validità' ;
          this.tessereVerificateArray.push('Attenzione! Accertatore senza tessera in corso di validità');
          this.tesseraValidita = false;
          //this.className = 'alert-danger'
      }
    }); 


<div class="pull-right col-md" style="position: absolute; right: 96px; top: 431px;">
                  <div 
                  *ngFor="let tesseraVerificata of tessereVerificateArray; 
                  let i = index" 
                  class="alert" 
                  [ngClass]="tesseraValidita  ? 'alert-success index' +i: 'alert-danger index' +i">
                  {{tesseraVerificata}}
                  </div>
</div>

Answer 1

This is because "tesseraValidita" is a global variable, and when you insert the second value, "tesseraValidita" changes on a global level and this is why the alert changes in both cases. You must isolate this variable and put it in an Array of objects

 if (valid) {
    this.tessereArray.push({ message: '**example**', valid": true});
 } else {
    this.tessereArray.push({"message": "**example**", "valid": false });
 }

<div *ngFor="let tessera of tessereArray; let i = index"
  [ngClass]="tessera.valid? 'alert-success index' +i: 
 'alert-danger index' +i"
     ...> {{tessera.message}}</...>

Answer 2

you'd better operate some more complex structures rather than just strings

tessereVerificateArray.push({tesseraValidita: true, message: 'Tessera Valida Nr:....'})

and than you can use the whole object that you created to draw one item

<div *ngFor="let tesseraVerificata of tessereVerificateArray; let i = index"
  [ngClass]="tesseraVerificata.tesseraValidita ? 'alert-success index' +i: 'alert-danger index' +i"
...
> {{tesseraVerificata.message}}</...>

Answer 3

In your ts you need to add tesseraValidita in every object, something like this.

if (valid) {
    this.tessereVerificateArray.push({
        text: 'Tessera Valida Nr: ' + itemValido.Numero + " scadenza il " + this.moment(itemValido.DataFineValidita).format('DD/MM/YYYY'),
        tesseraValidita: true
    });
} else {
    this.tessereVerificateArray.push({
        "text": "Attenzione! Accertatore senza tessera in corso di validità",
        "tesseraValidita": false
    });
}

and then in html it should be something like this.

<div class="pull-right col-md" style="position: absolute; right: 96px; top: 431px;">
   <div 
   *ngFor="let tesseraVerificata of tessereVerificateArray; 
   let i = index" 
   class="alert" 
   [ngClass]="tesseraVerificata.tesseraValidita  ? 'alert-success index' : 'alert-danger index'">
   {{tesseraVerificata.text}}
</div>
</div>