ngFor 循环中的 ngClass，角度 6答案

【问题标题】：ngClass in a ngFor loop, angular 6ngFor 循环中的 ngClass，角度 6
【发布时间】：2020-06-23 12:37:21
【问题描述】：

我正在尝试更改 ngFor 中的 ngClass 和三元运算符类，如果布尔值为 true，我想使用 alert-success 如果布尔值为 false，我想使用 alert-danger。当我插入第一个元素时，true 是可以的，但是当我插入第二个元素 false 时，第一个元素更改为 false

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>

【问题讨论】：

标签： angular ngfor ng-class

【解决方案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}}</...>

【讨论】：

【解决方案2】：

在您的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>

【讨论】：

【解决方案3】：

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

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

【讨论】：