需求描述
使用ng-zorro-antd中的标签页插件,点击tab页签,表格中的数据会出现一种现象:显示上一个tab的数据2s后,才会变成当前tab对应的表格数据,用户体验不好
解决方法:使用loading组件
sckg-todo.module.ts
import { NzSpinModule } from 'ng-zorro-antd';
@NgModule({
imports: [
NzSpinModule
]
})
sckg-todo.html
<nz-table #smallTable [nzLoading]="loading">
</nz-table>
sckg-todo.component.ts
//声明变量loading为true
loading:boolean = true
//获取待办任务
getRunningData(ower, categoryId) {
//先将loading赋值true
this.loading = true
this.service.getRunningTask(ower, categoryId).subscribe((res: any) => {
//加载数据后loading赋值false
this.loading = false
this.data = res.content
this.cd.markForCheck()
})
}
点击tab页时切换数据加载很慢,并且数据显示前一个tab的数据
解决方法
handleClick(categoryId, i) {
//点击的时候清空数据
this.data = []
this.categoryIndex = i
this.getRunningData(this.owner, categoryId)
this.nzPageIndexChange(1)
}