ngFor 循环中的 ngClass，angular 6

Question

我正在尝试更改 ngFor 中的 class whit ngClass 和三元运算符，如果布尔值为真我想使用警报成功如果布尔值为假我想使用警报危险.当我插入第一个元素时 true 是可以的，但是当我插入第二个元素 false 时第一个元素更改为 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

这是因为“tesseraValidita”是一个全局变量，当您插入第二个值时，“tesseraValidita”会在全局级别发生变化，这就是两种情况下警报都会发生变化的原因。您必须隔离此变量并将其放入对象数组

 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

你最好操作一些更复杂的结构而不仅仅是字符串

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

然后你可以使用你创建的整个对象来绘制一个项目

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

Answer 3

在您的 ts 中，您需要在每个对象中添加 tesseraValidita，类似这样。

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

然后在html中应该是这样的。

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

ngFor 循环中的 ngClass，angular 6

ngClass in a ngFor loop, angular 6

ng-class

ngfor

angular