无需在Angular中重新加载页面即可绑定实时数据
无需在Angular中重新加载页面即可绑定实时数据
提问于 2020-06-21 01:28:59
我有一个发送实时数据的API，我想在不刷新页面的情况下在视图中显示数据。setInterval在我的例子中不起作用，因为API的响应时间可能会延迟，而且我不想重新加载组件。
有没有什么解决方案可以解决：
ngOnInit(){
this.realTimeData()
}
realTimeData(){
this.http.get(api)
.subscribe(res => {
this.bindData = res;
})
}回答 2
Stack Overflow用户
发布于 2020-06-21 01:41:07
可以使用rxjs的interval observable运算符。这是一个小示例：
import 'rxjs/add/observable/interval';
...
sub = Observable.interval(10000)
.subscribe((val) => { <your code here> });你也可以用以下命令停止它的取消描述：
this.sub.unsubscribe();
或者使用Observable的timer
timer = Observable.timer(10000);
this.timer.subscribe((t) => this.<your method>());Stack Overflow用户
发布于 2020-06-21 02:41:27
按时间间隔轮询http端点：
您可以使用timer或API rxjs创建操作符来发出和触发interval调用。
realTimeDataSubscription$: Subscription;
ngOnInit() {
this.realTimeData();
}
realTimeData() {
this.realTimeDataSubscription$ = timer(0, 1000)
.pipe(switchMap(_ => this.http.get(api)))
.subscribe(res => {
this.bindData = res;
});
}
ngOnDestroy() {
this.realTimeDataSubscription$.unsubscribe();
}始终建议将http调用放在服务文件中并注入到组件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62489342
复制相关文章
相似问题
腾讯云开发者
