如何在syncfusion Grid组件中隐藏网格微调器答案

【问题标题】：How to hide grid spinner in syncfusion Grid component如何在syncfusion Grid组件中隐藏网格微调器
【发布时间】：2019-02-18 06:09:45
【问题描述】：

我在我的项目中使用了 syncfusion angular GridComponent。我希望网格在创建后有一个微调器，并且微调器应该旋转直到加载数据。为了启动微调器，我为创建网格时编写了一个函数：

document-table.component.html

<ejs-grid #grid (created)="creadted()" ...>
...
</ejs-grid>

document-table.component.ts:

@ViewChild('grid') grid: GridComponent
ngOnChanges(changes: SimpleChanges){
   this.tableData = changes.data.currentValue;
   if(changes.data.currentValue != null){
      this.grid.hideSpinner=()=>false; //it doesn't work and the spinner still spinning
   }
created(){
   this.grid.hideSpinner =()=>true; //spinner start spinning
}

加载数据后如何停止微调器？

【问题讨论】：

使用this.grid.showSpinner() 显示微调器，使用this.grid.hideSpinner() 隐藏微调器。
我试过了，还是不行。
如何加载数据？ ngOnChanges 会被触发吗？实际上ejs-grid 默认显示微调器的所有操作。您确定需要手动显示/隐藏吗？
网格的父组件从服务中获取数据并将其作为输入发送到网格组件（DocumentTableComponent），并在 ngOnChange() 中检查数据是否已更改，因此我将其分配给另一个变量。默认情况下，网格在加载数据之前从不显示微调器，所以我不得不使用 showSpinner 和 hideSpinner

标签： angular syncfusion

【解决方案1】：

ejs-gird docs 说：

默认情况下，网格会显示其所有操作的微调器。

因此，如果您需要为您的操作手动设置微调器，我不确定。

如果您必须手动设置微调器，如果您想根据对网格所做的一些更改来触发函数，则可能必须使用 setTimeout() 包装函数调用。

@ViewChild('grid') grid: GridComponent
ngOnChanges(changes: SimpleChanges){
   this.tableData = changes.data.currentValue;
   if(changes.data.currentValue != null) {
      setTimeout(() => this.grid.hideSpinner(), 0)
   }
}
created() {
   setTimeout(() => this.grid.showSpinner(), 0)
}

另见：Why is setTimeout(fn, 0) sometimes useful?

【讨论】：