Question

首先，我是Angular的新手，我正在努力做到这一点。我创建了一个应用程序，我希望从一个从mssql服务器发布JSON数据的Web服务器获取实时数据。

我设法像这样检索数据

export class AppComponent {


posts:string;

  constructor(http: Http) {
  http.get('https://jsonplaceholder.typicode.com/posts')

    .map(res => res.json())

    .subscribe(data => this.posts = data);
}
}

然后将其插入我的html文档，例如<h1>{{data.id}}</h1>

但是当我的Web服务器更新JSON时，html根本不会更新。我明白我错过了一些必要的东西，比如可以观察到的，如果有人能把我推向正确的方向，我将不胜感激。

Answer 1

如果您想不断向服务器询问最新数据，您需要定期拨打服务器：

import { Observable } from 'rxjs';

export class AppComponent {

  posts:string;

  ngOnInit() {
     this.posts = Observable
         .interval(1000) // call once per second
         .startWith(0)
         .switchMap(() => 
             this.http.get('https://jsonplaceholder.typicode.com/posts')
                 .map((res: Response) => res.json());
         })
         // example how to get just the first result
         .map(posts => posts[0]);
 }

然后在模板中使用异步管道：

<pre>{{ (posts | async) | json }}</pre>

Answer 2

您最终应该将该http调用移动到服务中，但出于学习目的，您可以将其移动到组件初始化时由ngOnInit调用的方法中。由于您希望连续获取数据，请在observable上使用间隔。

这可能不是您可以复制/粘贴的完美/准确的代码，但它应该会给您一些想法。

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
//import Angular's Http or custom Http

//(Your decorators/class declaration here)

  posts$: Observable<yourType[]>

  constructor(http: Http) { }

  ngOnInit(){
      this.getData();
  }

  getData(): void {
      this.posts$ = Observable.interval(1000)
                              .startsWith(0)
                              .switchMap(() => 
          this.http.get('https://jsonplaceholder.typicode.com/posts')
                   .map(res => res.json());
          )
  }

然后在模板中使用异步管道和* ngFor循环：

  <div *ngFor="let post of (posts$ | async)">
     <h1>{{post?.id}}</h1>
  </div>

实时数据Angular

2 个答案: