javascript - ¿Cómo puedo activar una función alert/swal una vez y no repetidamente?

Soy nuevo en Angular.

Tengo una aplicación con dos variables que indican el estado de una transacción financiera. Las variables son: tab1TrxMessage que almacena cualquier mensaje y tab1TrxStatus que indica el estado de una transacción, ya sea: Fallida, exitosa o pendiente. Cuando una transacción ha fallado, me gustaría que el usuario reciba una alerta/notificación swal similar a esta:

swal({
       title:'Error!',
       text: 'Warning... Transaction failed!',
       type: 'error',
       confirmButtonText: 'Ok',
       confirmButtonColor: '#ff754f'
     });

Actualmente, mi código se ve así:

../componente.html

<div class="sign-btn text-center">
  <a class="btn btn-lg text-white">
    <span *ngIf="tab1TrxMessage">{{tab1TrxMessage}}</span>
    <span *ngIf="!tab1TrxMessage && tab1TrxStatus != 'Success'">Failed</span>
    <span *ngIf="transactionFailed()">Failed</span>
  </a>
</div>

Con atención específica en la función transactionFailed()...

../componente.ts

public transactionFailed() {

    if(this.tab1TrxMessage == 'Failed: Cancelled by User' && this.tab1TrxStatus != 'Success') {

        console.log("You are in transactionFailed!")

        swal({
           title:'Error!',
           text: 'Warning... Transaction failed!',
           type: 'error',
           confirmButtonText: 'Ok',
           confirmButtonColor: '#ff754f'
         });

         return true;
    }

    return false;
}

El código anterior, cuando una transacción falla, produce: ¡Estás en transactionFailed! varias veces en la consola del navegador...

...y también lo hace la alerta swal con ¡Advertencia... Transacción fallida! apareciendo repetidamente.

¿Hay una mejor manera de resolver esto para que la alerta swal solo se muestre UNA VEZ por transacción fallida?

Esperando con ansias tu ayuda.

Respuesta #1

Haz un contador que ejecute tu código solo una vez. Por ejemplo.

failedTransactionCntr = 0;
public transactionFailed() {

    if(this.tab1TrxMessage == 'Failed: Cancelled by User' && this.tab1TrxStatus != 'Success') {

        console.log("You are in transactionFailed!")
        if (this.failedTransactionCntr == 0) {
          swal({
           title:'Error!',
           text: 'Warning... Transaction failed!',
           type: 'error',
           confirmButtonText: 'Ok',
           confirmButtonColor: '#ff754f'
         });
         this.failedTransactionCntr ++;
        }
         return true;
    }

    return false;
}

Respuesta #2

Esto ocurre debido a tu estrategia de detección de cambios y al método transactionFailed() que se llamará cada vez que Angular ejecute la detección de cambios. La razón por la que ocurre es porque actualizar el DOM es parte de la detección de cambios y Angular necesita llamar a transactionFailed() para saber qué valor usar para la actualización del DOM.

Puedes cambiar changeDetectionStrategy a onPush para evitar que transactionFailed() se llame múltiples veces.

@Component({
 selector: 'your-component',
 templateUrl: './your.component.html',
 styleUrls: ['./your.component.css'],
 changeDetection: ChangeDetectionStrategy.OnPush // this line
})

export class YourComponent {

}

Sin embargo, es necesario llamar manualmente al método detectChanges() cuando se desea que se ejecute la detección de cambios:

constructor(private ref: ChangeDetectorRef) {
    this.ref.detach();
}

start() {
    this.fooVariable = 'This is a foo vaiable';
    this.ref.detectChanges();
}

Puedes leer más sobre las estrategias de detección de cambios aquí