title: ngClass in a ngFor loop, angular 6
body: <p>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</p>
  <p>ts</p>
  <pre><code>tesseraValidita: boolean;
  
  checkCardValitidy(tesserato: any){
      this._dipendentiMandatariService.getTessere(tesserato.idCRM).subscribe((tessera: Tessera[]) =&gt; {
        let valid = false;
        let itemValido: Tessera;
        valid = tessera.some((item: Tessera) =&gt; {
            itemValido = item;
            return (item.Stato === 'In Essere' &amp;&amp; item.Tipo === 'Autorale' &amp;&amp; this.moment(item.DataFineValidita).format('YYYY-MM-DD') &gt; 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 + &quot; scadenza il &quot; + this.moment(itemValido.DataFineValidita).format('DD/MM/YYYY');
            this.tessereVerificateArray.push('Tessera Valida Nr: ' + itemValido.Numero + &quot; scadenza il &quot; + 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'
        }
      }); 
  
  
  &lt;div class=&quot;pull-right col-md&quot; style=&quot;position: absolute; right: 96px; top: 431px;&quot;&gt;
                    &lt;div 
                    *ngFor=&quot;let tesseraVerificata of tessereVerificateArray; 
                    let i = index&quot; 
                    class=&quot;alert&quot; 
                    [ngClass]=&quot;tesseraValidita  ? 'alert-success index' +i: 'alert-danger index' +i&quot;&gt;
                    {{tesseraVerificata}}
                    &lt;/div&gt;
  &lt;/div&gt;
  
  
  </code></pre>