Question

我正在尝试更改ngFor内的类ngClass和三进制运算符，如果布尔值是true，我想使用alert-success，如果布尔值是false，我想使用alert-danger。当我插入firs元素时，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，角度为6

3 个答案: