Weboldal keresés

html - Valós idejű adatok Angular

Először is, nagyon új vagyok az Angularban, és küzdök azzal, hogy ezt helyesen csináljam. Készítettem egy alkalmazást, amiből valós idejű adatokat szeretnék kapni egy web szervertől, amely JSON adatokat küld egy MSSQL szerverről.

Sikerült az adatokat így visszaszerezni

export class AppComponent {


posts:string;

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

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

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

és aztán csak illeszd be az én HTML dokumentumomba így <h1>{{data.id}}</h1>

De amikor a webkiszolgálóm frissíti a JSON-t, a HTML egyáltalán nem frissül. Értem, hogy valami lényeges dolog hiányzik, például az observable, és hálás lennék, ha valaki a helyes irányba tudna terelni.

Válasz #1

Ha folyamatosan a szervert szeretnéd kérdezni a legfrissebb adatokért, akkor időközönként kell hívnod a szervert:

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

Akkor a sablonban használd az async pipe-ot:

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

Válasz #2

Végül át kellene helyezned azt az http hívást egy szolgáltatásba, de tanulási céllal áthelyezheted egy metódusba, amelyet az ngOnInit hív, amikor a komponens inicializálódik. Mivel folyamatosan adatot szeretnél kapni, használj egy intervallumot az observable-on.

Lehet, hogy ez nem a tökéletes/pontos kód, amit másolhatsz/beilleszthetsz, de adhat néhány ötletet.

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

Ezután használd az async pipe-ot és a *ngFor ciklust a sablonodban:

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

Kapcsolódó cikkek