Блог

У меня есть значок обновления, который я использовал для обновления или перезагрузки сетки. Однако со следующим кодом

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

Значок неподвижен. Я нашел следующий значок вращения, но могу найти документацию только о том, как замедлить или ускорить анимацию вращения.

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

Я погуглил и нашел, что у единственного npmjs есть управляемый вращающийся значок, но не совсем то, что я предпочитаю.

Я думал о ngIf или ngClass . В событии click, которое вызывает функцию обновления для перезагрузки данных, есть ли способ переключаться между двумя классами, которые являются fa-fw и fa-spin . В принципе, значок будет вращаться при нажатии кнопки и остановится после завершения перезагрузки?

Новичку будет полезна любая помощь. Спасибо.

Лучшее решение вашей проблемы — использовать ngClass директиву, подобную приведенной ниже. Поскольку это не приведет к удалению элемента из DOM, он просто применяет условный CSS в соответствии с вашей логикой.

your.component.html

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

your.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);

 }
  

Надеюсь, это поможет!

Для достижения этого можно использовать тернарный оператор

<div [ngClass]="isLoading === true ? 'fa-spin' : 'fa-fw'">

Значение isLoading должно быть равно true перед вызовом API. После изменения ответа на false.