Pesquisa de site

html - Dados em tempo real Angular

Primeiro de tudo, sou muito novo no Angular e estou tendo dificuldade em acertar isso. Eu criei um aplicativo que quero obter dados em tempo real de um servidor web que está enviando dados JSON de um servidor mssql.

Consegui recuperar os dados assim

export class AppComponent {


posts:string;

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

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

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

e então apenas insira-o no meu documento HTML assim <h1>{{data.id}}</h1>

Mas quando meu servidor web atualiza o JSON, o HTML não é atualizado de forma alguma. Eu entendo que estou deixando de fazer algo essencial, como usar observáveis, e ficaria grato se alguém pudesse me orientar na direção certa.

Resposta #1

Se você quiser perguntar continuamente ao servidor pelos dados mais recentes, precisará chamar o servidor em um intervalo:

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]);
 }

Então, no template use o pipe async:

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

Resposta #2

Você deve mover essa chamada http para um serviço eventualmente, mas para fins de aprendizado você pode movê-la para um método que é chamado pelo ngOnInit quando o componente é inicializado. Como você quer obter dados continuamente, use um intervalo no observable.

Este pode não ser o código perfeito/exato que você pode copiar/colar, mas deve te dar algumas ideias.

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());
          )
  }

Então use o pipe async e o loop *ngFor no seu template:

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

Artigos relacionados