Javascript 如何一次而不是多次触发警报/swal功能？

我是个新手

我有一个应用程序，它有两个变量，指示金融交易的状态。 变量为：

tab1TrxMessage

，用于存储任何消息，以及

tab1TrxStatus

，指示事务状态为：失败、成功或挂起。当事务失败时，我希望用户收到类似以下内容的swal警报/通知：

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

目前，我的代码如下所示：

。/component.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>

当事务失败时，上面的代码产生：

您处于transactionFailed在浏览器控制台中重复多次


…以及带有
警告的swal警报。。。交易失败反复弹出

是否有更好的方法解决此问题，使swal警报在每个失败的事务中只显示一次

期待您的帮助。
制作一个计数器，它只运行您的代码一次。例如


failedTransactionCntr=0；
公共事务处理失败（）{
if（this.tab1TrxMessage==“失败：被用户取消”&&this.tab1TrxStatus！=“成功”）{
log（“您在transactionFailed！”）
如果（this.failedTransactionCntr==0）{
游泳({
标题：“错误！”，
文本：“警告…事务失败！”，
键入：“错误”，
confirmButtonText:'确定'，
confirmButtonColor:“#ff754f”
});
this.failedTransactionCntr++；
}
返回true；
}
返回false；
}
这是由于您的更改检测策略和方法导致的。
transactionFailed（）
函数将在每次运行更改检测时调用。之所以会发生这种情况，是因为更新DOM是更改检测的一部分，Angular需要调用
transactionFailed（）
来了解DOM更新使用的值

您可以将
changeDetectionStrategy
更改为
onPush
，以避免
transactionFailed（）
被多次调用

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

export class YourComponent {

}

但是，如果希望运行更改检测，则需要手动调用方法
detectChanges（）
：

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

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

如果您希望它只有效一次，那么您可以很好地使用标志。
例如：


lflagtranfailed=false；
公共事务处理失败（）{
如果（this.tab1TrxMessage=='Failed:Cancelled by User'&&this.tab1TrxStatus！='Success'&&lflagtranfailed==false）{
log（“您在transactionFailed！”）
LFLAGTranfailed=真；
游泳({
标题：“错误！”，
文本：“警告…事务失败！”，
键入：“错误”，
confirmButtonText:'确定'，
confirmButtonColor:“#ff754f”
});
返回true；
}
返回false；
}
constructor(private ref: ChangeDetectorRef) {
    this.ref.detach();
}

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