在 Angular 中应用条件类的最佳方法是什么？我应该使用 ngIf 或 ngClass 什么？

Question

我有一个刷新图标，用于刷新或重新加载网格。但是使用以下代码

<i class="fas fa-sync fa-fw" (click)=refresh()></i>

图标不动。我找到了以下旋转图标，但我只能找到有关如何减慢或加快旋转动画速度的文档。

<i class="fas fa-sync fa-spin" (click)=refresh()></i>

我用谷歌搜索，发现只有npmjs一个可控的旋转图标，但不是我喜欢的。

我在想ngIf或ngClass。在它调用刷新功能重新加载数据的单击事件，是有办法的两个类之间切换fa-fw和fa-spin。基本上，单击按钮时图标会旋转并在重新加载完成后停止？

对新手的任何帮助表示赞赏。谢谢。

Answer 1

您的问题的最佳解决方案是使用ngClass如下指令。因为它不会从 DOM 中删除元素，它只是根据您的逻辑应用条件 CSS。

你的.component.html

<i class="fas fa-sync " 
  [ngClass]="isLoading ? 'fa-spin' : 'fa-fw'"  
  (click)=refresh()>
</i>

你的.component.ts

 this.isLoading;

 refresh() {
   isLoading= true; // make this true before calling api
  // your server call here
  setTimeout( ()=> {
      this.isLoading = false; // after loading data set it false
 },3000);

 }

希望这会有所帮助！