angular - 在 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);

 }

希望这会有所帮助!