Angular发起HTTP请求时按钮点击旋转动画不生效问题咨询

你的写法本身的错误在异步逻辑的执行顺序，Angular的HTTP请求本身就是异步非阻塞的，不会阻塞主线程执行。
subscribe()方法只会注册请求结束后的回调函数，不会等待请求返回再执行后续代码，所以你刚把refreshAnimation设为true，下一行的this.refreshAnimation = false就立刻执行了，相当于刷新状态只存在了几毫秒，Angular变更检测还没来得及把CSS类渲染到DOM上，状态就被重置，动画自然无法触发。

你只需要把重置动画状态的逻辑放到HTTP请求结束的回调中即可，推荐使用RxJS的finalize操作符，不管请求成功、失败还是被主动取消，都会执行重置逻辑，避免请求异常后图标一直旋转的问题。

修改后的TS代码如下：

// 首先导入finalize操作符
import { finalize } from 'rxjs/operators';

// 原有refresh方法修改为
refresh(region : string)
{
    this.refreshAnimation = true;
    this.myservice.refreshAll()
      .pipe(
        takeUntil(this.destroy$),
        // 所有请求结束场景都会触发该回调
        finalize(() => this.refreshAnimation = false)
      )
      .subscribe(_ => this.loadMyData());
}

你现有的HTML和CSS代码没有问题，不需要修改。

内容的提问来源于stack exchange，提问作者Kevin