Question

我是Angular的新手。

我有一个带有两个变量的应用程序，用于指示金融交易的状态。变量为：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()函数...

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

上面的代码在交易失败时会产生：You are in transactionFailed!在浏览器控制台中多次出现...

...， swal 也会发出警告，反复弹出Warning... Transaction failed!。

是否有更好的方法来解决此问题，以使 swal 警报在每次失败的交易中仅显示一次” ？

期待您的帮助。

Answer 1

创建一个计数器，该计数器将只运行一次代码。例如。

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;
}

Answer 2

发生这种情况是由于您的变更检测策略和方法transactionFailed()函数每次Angular运行变更检测都会被调用。发生这种情况的原因是因为更新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();
}

You can read more about Change detection strategies here

Answer 3

如果您对它仅一次有效感兴趣，则可以很好地使用一个标志。例如：

lFlagtransfailed = false; 
public transactionFailed() {

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

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

         return true;
    }

    return false;
}

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

3 个答案: