Question

我正在做一个喜欢的按钮。因此，我正在使用fa fa-thumbs-up在ngclass中显示白色背景，彩色背景。因此，击中。它将调用一个Typescript函数，并将使用API更改ngclass和更新服务器端。

现在，我想要的是onClicking大拇指。它将切换（正在发生）。并调用该API。因此，在获得响应之前的这段时间内，我想禁用点击功能（click）=“ toggle（）”。

  <div *ngIf="idea.isDisplay === true" style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
    <i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>
       &nbsp;{{likedBy.length}}
  </div>  


toggle()
{
    this.isLiked = !this.isLiked;
    ....//calling observable
}

Answer 1

尝试一下可以解决您的问题。将一个属性添加到您的班级。并点击切换将其设置为true

isProcessing: boolean

toggle(){
    if(this.isProcessing){ return; }
    this.isProcessing= true;
    // api call goes here 
}

当api返回响应成功或错误集

this.isProcessing = false;

这样，只要有一个正在进行的api调用，就不会再次触发它。

希望这会有所帮助：）

Answer 2

您可以在组件中定义一个标志，并在调用的方法中使用它来跟踪是否正在处理它。从服务获得响应后，请重置标志。下面的伪代码。

isProcessing:boolean = false;

HitLike() {
    if(!isProcessing) {
        this.isProcessing = true;            
        this._yourServiceInstance._serviceMethod.subscribe(result => {
            if(res.success) {
                //change class of button
                this.isProcessing = false;
            }
        }, error => {
            //change button class and show a relevant message
            this.isProcessing = false;
        });
    }
}

禁用事件，例如在fa-fa-icon或打字稿中的任何文本上单击

2 个答案: