为网格 Angular 中的刷新按钮添加动画

发布于 2025-01-12 12:56:42 字数 966 浏览 0 评论 0原文

当网格中没有更新的数据时，刷新按钮在视觉上不会执行任何操作。这让用户感到困惑，所以我想在网格重新加载期间向按钮添加动画。使用很棒的字体方式。

HTML：

    <hum-button
  [tooltipContent]="'GridComponent.refreshGrid' | translate"
  iconCss="fa fa-refresh"
  [isPrimary]="true"
  [onlyIcon]="true"
  (click)="onRefreshGridClick()"
>
</hum-button>

角度： grid.component.ts

public refreshData(): void {
if (typeof this.refreshGridFn === 'function') {
  this.refreshGridFn();
  return;
}

if (this.agGrid) {
  return this.agGrid.refreshData();
}

}

Angular: ag-grid.component.ts

  public refreshData(): void {
if (!this.customDatasource) {
  this.log('refreshData');
  if (this.dataSource && this.dataSource.rowCount > 0) {
    this.gridApi.refreshInfiniteCache();
  } else {
    this.gridApi.purgeInfiniteCache();
  }
}

}

此按钮

原文

When there is no updated data in a grid, the refresh button will visualy do nothing. This is confusing for the user, so i want to add an animation to the button during the reload of the grid. Use the font-awsome way.

HTML:

    <hum-button
  [tooltipContent]="'GridComponent.refreshGrid' | translate"
  iconCss="fa fa-refresh"
  [isPrimary]="true"
  [onlyIcon]="true"
  (click)="onRefreshGridClick()"
>
</hum-button>

Angular:
grid.component.ts

public refreshData(): void {
if (typeof this.refreshGridFn === 'function') {
  this.refreshGridFn();
  return;
}

if (this.agGrid) {
  return this.agGrid.refreshData();
}

}

Angular: ag-grid.component.ts

  public refreshData(): void {
if (!this.customDatasource) {
  this.log('refreshData');
  if (this.dataSource && this.dataSource.rowCount > 0) {
    this.gridApi.refreshInfiniteCache();
  } else {
    this.gridApi.purgeInfiniteCache();
  }
}

}

this button

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

停滞 2025-01-19 12:56:42

有几种选择。

其中之一是使用 .css。如果你定义了

.rotate {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

你可以使用一些像

<mat-icon [class.rotate]="loading">refresh</mat-icon>

并将变量加载为 true/false

你也可以使用 Angular 动画：

animations:[
    trigger('rotate', [
    transition('void=>*',[style({transform:'rotate(0)'})]),
    transition ('* => *', [
      style({ transform: 'rotate(0)' }),
      animate ('650ms ease-in-out',style ({ transform: 'rotate(360deg)' }),
      ),
    ])
  ])

你使用

<mat-icon [@rotate]="count" 
     (@rotate.done)="loading && count=count+1>refresh</mat-icon>

并定义两个变量

count:any;
loading;

当你想要开始

this.count=this.count!=1?1:0
this.loading=true

时当完成时

this.loading=false

在 stackblitz 您有两个选项（只需单击按钮开始/结束动画）

更新

好吧，我们想在调用 API 时使用。所以我想象一个返回可观察值的服务

我们有两种方法：

使用变量并完成 rxjs 运算符。
<前><代码> getData()
{
this.loading=true;
this.count=this.count==1?0:1
this.dataService.getData().pipe(finalize(()=>{
this.loading=false
})
).subscribe(res=>this.data=res)
}

其他方法是使用运算符指示，因为它是这样的
所以（遗憾的是有一点关注) 该操作员需要一个
主题，所以功能就变成了

 getAllData()
  {
    this.count2=this.count2==1?0:1
    this.dataService.getData().pipe(指示(this.loading$,0)
    ).subscribe(res=>this.data=res)

  }

但是 .html 有点复杂


<按钮垫按钮（单击）=“getAllData()”>
     ;
         刷新
     



<按钮垫按钮（单击）=“getAllData()”>
  
  
     刷新

使用运算符的优点是你可以与任何可观察的一起使用 - 甚至是 rxjs 运算符 of -

我只是更新 stackblitz

There're several options.

One of then is using .css. If you defined

.rotate {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

You can use some like

<mat-icon [class.rotate]="loading">refresh</mat-icon>

And put the variable loading to true/false

You can also use Angular animations:

animations:[
    trigger('rotate', [
    transition('void=>*',[style({transform:'rotate(0)'})]),
    transition ('* => *', [
      style({ transform: 'rotate(0)' }),
      animate ('650ms ease-in-out',style ({ transform: 'rotate(360deg)' }),
      ),
    ])
  ])

You use

<mat-icon [@rotate]="count" 
     (@rotate.done)="loading && count=count+1>refresh</mat-icon>

And define two variables

count:any;
loading;

When you want to start

this.count=this.count!=1?1:0
this.loading=true

When finished

this.loading=false

In the stackblitz you has the two options (just click the buttons to start/end animation)

Update

Well, we want to use when call to an API. So I imagine a service that return an observable

We has two approach:

Using a variable and finalize rxjs operator.

  getData()
  {
    this.loading=true;
    this.count=this.count==1?0:1
    this.dataService.getData().pipe(finalize(()=>{
      this.loading=false
    })
    ).subscribe(res=>this.data=res)
  }

Other approach is use an operator indicate as it's how in this
SO (that sadly had a little attention) This operator need a
Subject, so the functions becomes like

  getAllData()
  {
    this.count2=this.count2==1?0:1
    this.dataService.getData().pipe(indicate(this.loading$,0)
    ).subscribe(res=>this.data=res)

  }

But the .html it's a bit complex

<!-using css-->
<button mat-button (click)="getAllData()">
     <mat-icon [class.rotate]="loading$|async">
         refresh
     </mat-icon>
</button>

<!--using Angular animations-->
<button mat-button (click)="getAllData()">
  <ng-container *ngIf="{loading:loading$|async} as load">
  <mat-icon [@rotate]="count2" 
            (@rotate.done)="load.loading && count2=count2+1">
     refresh
  </mat-icon>
</ng-container>
</button>

The advantage of use an operator is that you can use with any observable -even the rxjs operator of-

I just update the stackblitz

回复收藏 0 原文

~没有更多了~