observableを使って5秒ごとにデータをリフレッシュする方法

Question

私はangular2とrxjsではかなり新しいです。私は私がObservable.interval（5000）で解決策を見つけたが、コンパイル中に、私はいくつかのエラーを持っている、

、私はデータごとに5秒を取得したい、jsonAPIからいくつかのデータを取得するangular2アプリを作成するために

をしようとしています

ngOnInit（）コードにObservable.interval（500）を挿入する方法

お願いします！あなたは次のようにあなたのProductService.tsの内側に修正する必要があり

import { Component, OnInit } from '@angular/core'; 

import { IProduct } from './product'; 
import { ProductService } from './product.service'; 

@Component({ 
    templateUrl: 'app/products/product-list.component.html', 
    styleUrls: ['app/products/product-list.component.css'] 
}) 
export class ProductListComponent implements OnInit { 
    pageTitle: string = 'Product List'; 
    imageWidth: number = 50; 
    imageMargin: number = 2; 
    showImage: boolean = false; 
    listFilter: string; 
    errorMessage: string; 

    products: IProduct[]; 

    constructor(private _productService: ProductService) { 

    } 

    toggleImage(): void { 
     this.showImage = !this.showImage; 
    } 

    ngOnInit(): void { 
     this._productService.getProducts() 
       .subscribe(products => this.products = products, 
          error => this.errorMessage = <any>error); 
    } 

    onRatingClicked(message: string): void { 
     this.pageTitle = 'Product List: ' + message; 
    } 
} 

productservice.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/throw'; 

import { IProduct } from './product'; 

@Injectable() 
export class ProductService { 
    private _productUrl = 'api/products/products.json'; 

    constructor(private _http: Http) { } 

    getProducts(): Observable<IProduct[]> { 
     return this._http.get(this._productUrl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

    getProduct(id: number): Observable<IProduct> { 
     return this.getProducts() 
      .map((products: IProduct[]) => products.find(p => p.productId === id)); 
    } 

    private handleError(error: Response) { 
     // in a real world app, we may send the server to some remote logging infrastructure 
     // instead of just logging it to the console 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

Answer 1

は、あなたのサービスは、次のようになり、あなたがいずれかをお見逃しなく確認してください輸入品：

import 'rxjs/Rx'; 
import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 

    @Injectable() 
    export class ProductService{ 
     constructor(private _http:Http) {} 

     getData() { 
     return Observable.interval(5000).flatMap(() => { 
      return this._http.get(`URL GOES HERE`) 
      .map(res => res.json()); 
     }); 
     } 
    } 

およびコンポーネントに：

import { Component, OnInit } from '@angular/core'; 
import { ProductService } from './product.service'; 

export class ProductListComponent implements OnInit { 
    constructor(public _productService: ProductService) {} 

ngOnInit() { 
    this._productService.getData() 
     .subscribe(data => this.products = data, 
       err => console.log(err)); 
    } 
} 

これは動作しますが、あなたはあなたの質問がそれを不足しているとして、あなたはコンソールで取得したエラーを共有していることを確認する必要があります。

Answer 2

、

getProducts(){ 
    Observable.interval(5000) 
     .flatMap(() => this.http.get(URL) 
     .map(res => res.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error'))) 
     .subscribe(data => { 
     console.log(data) 
     }) 
}