ngFor 循环中的 ngClass ，角度 6

Question

我正在尝试更改ngFor中的类whit ngclass和三元运算符，如果布尔值为真，我想使用alaling-成功，如果布尔值为假，我想使用alaling-危险。当我插入第一个元素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

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

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 2

在您的ts中，您需要在每个对象中添加tes seraValidita，如下所示。

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>

Answer 3

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

 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}}</...>