Question

我从网络服务获取JSON数据。我目前有一个实时显示这些数据的网页，但除非我按F5手动刷新页面，否则不显示新值。如何实时监听新响应并将最新数据显示在Html上？如果有任何不清楚的地方，请告诉我。

谢谢

组件

 ngOnInit(): void {
IntervalObservable.create(1000)
  .subscribe(() => {
    this.appService.getDataLN().subscribe(resLN => {
      //
      ];
      names.forEach(name => {
        this.findLastValueLN(resLN, name);
      })
    }, error => console.log(error))


    this.appService.getDataLS().subscribe(resLS => {
      let names = [
       //
      ];
      names.forEach(name => {
        this.findLastValueLS(resLS, name);
      })
    }, error => console.log(error)
    )}


  findLastValueLN(resLN, name: String) {
let index = resLN.Object.Table.findIndex(d => 
d.objectName[d.objectName.findIndex(objectName => objectName === name)]);
if (resLN.Object.Table[index].objectName == "status") {
  if (resLN.Object.Table[index].LastValue == "on") {
    let index_A = resLN.Object.Table.findIndex(actual =>

HTML

<div>{{this.arrLN_[0]</div>
//expected arrLN_[2] to be printed only when status is off.. 
<div>{{this.arrLN_[2]</div>

Answer 1

您可以在组件中声明变量：

result = Observable<any>;

然后以这种方式调用服务：

this.result = myservice.getDataLN();

在您的html文件中，您可以使用异步管道始终显示新值而无需在component.ts中进行订阅，因此您将在html文件中显示此内容：

{{result | async }}

Answer 2

这是你要找的东西吗？

ngOnInit(){
    IntervalObservable.create(1000)
        .subscribe(() => {
            this.appService.getDataLN().subscribe(res => {
                let names = [//some name fileds that I need to serach from JSON];
                names.forEach(name => {
                    this.findLastValueLN(res, name);
                })
            }, error => console.log(error););
            this.appService.getDataLK().subscribe(res => {
                let names = [//some name fileds that I need to serach from JSON];
                names.forEach(name => {
                    this.findLastValueLN(res, name);
                })
            }, error => console.log(error););
        }
      });
}

这将每秒对您的后端进行基本轮询并更新结果。：）

可能还想查看.takeWhile observable修饰符，以确保代码仅在该组件处于活动状态时运行。

Angular4 - 如何实时刷新Web服务中的数据？

2 个答案: