angular异步获取数据导致视图无法实时刷新的问题

您所在的位置:网站首页 angular页面刷新 angular异步获取数据导致视图无法实时刷新的问题

angular异步获取数据导致视图无法实时刷新的问题

2023-12-03 03:51| 来源: 网络整理| 查看: 265

场景:

获取表格数据时明明已经成功发送接口并获取到值了,但是页面就是没有更新,需要再点一次才能触发页面更新 说明:

针对我的此场景最终试验只有最终方案有效,但因此而产生的一些思路也记录一下,大家可以直接跳到思路四最终方案啦哈哈

思路一

以为是UI组件库造成的,参照网上说法:(https://blog.csdn.net/walker4000/article/details/109915064)

问题在于nz-zorro(angular的一个UI组件库,类似于ant-design)从7.0版本开始,组件默认在OnPush模式下工作,只有当输入发生变化且它们的整个对象实例都发生变化,才会引起组件的变化监测,这样,如果对数据源直接进行push / splice操作,并不会影响到数组本身(对象实例引用)的改变,因此页面不会发生更新

update() { this.dataSet.push({ xxx }); this.dataSet = [...this.dataSet]; // 添加这行代码就行 console.log(this.dataSet); }

结果:不起什么作用,重新打印断点并考虑,发现每次数据源dataSource展示的其实是上一次存储的值,因此,点击第二次才会获得本次所需的正确值,service.subscribe中获取到的值在外面无法拿到,这是异步获取的值,在外面打印数据源也是无法拿到最新值,于是有了思路二。

思路二

有点类似react中setState不会实时更新,会把几次修改攒到一起更新,根据这个思路加入了setTimeout,但是失败了(看来我还是太年轻了—_—|)

思路三

调用了官方提供的this.table.rowRender()也没起啥效果(也有小伙伴可以试一下这种方案吧)

思路四

最终方案:(参考https://blog.csdn.net/chongchong1325/article/details/77455513)

通过调用ref…markForCheck();和ref.detectChanges()进行强制刷新

constructor(private tableUpRef:ChangeDetectorRef) {} getLogs(){ this.commonList = [] this.functionService.getApi().subscribe(res=>{ this.commonList =[...res.list]; this.tableRef.markForCheck(); this.tableRef.detectChanges(); },err=>{ this.message.error("获取设备日志失败") }) }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3