각도 4 | 타이머를 설정하고 API 데이터를 업데이트하려면 어떻게해야합니까?

Question

카운트 다운이 완료되면 API 데이터를 업데이트하는 타이머를 설정하고 API 데이터가 업데이트되면 원래의 카운트 다운으로 되돌아갑니다.

예 10까지 카운트하고 싶으면 API 데이터가 업데이트됩니다.

다음은 타이머가있는 코드입니다.

import { Component, ViewEncapsulation, Pipe, PipeTransform, VERSION } from '@angular/core'; 
import { Http, Response, RequestOptions, Headers } from '@angular/http'; 
import { SlicePipe, DatePipe } from '@angular/common'; 
import {Observable} from 'rxjs/Observable' 
import 'rxjs/add/observable/timer' 
import 'rxjs/add/operator/map' 
import 'rxjs/add/operator/take' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 

export class AppComponent{ 

public data: any; 
countDown; 
counter = 10; 

constructor(private http: Http) { 
    this.countDown = Observable.timer(0,1000) 
    .take(this.counter) 
    .map(() => --this.counter); 
} 

ngOnInit() { 
    this.getVoicepicData(); 
    this.getData(); 
    console.log('hi'); 
} 

getData(){ 
    let headers = new Headers({ 
     'token': "MY TOKEN GOES HERE", 
     'Content-Type': 'application/json' 
    }); 

    let options: RequestOptions = new RequestOptions({ headers: headers }); 

    return this.http.get('http://my.apidatahere.com/api/', options) 
     .map((res: Response) => res.json()) 
} 

getVoicepicData() { 
    this.getData().subscribe(data => { 
     this.data = data 
    }) 
} 
} 

Answer 1

당신은 간격 n 초에서 어떤 기능을 트리거하기 위해 자바 스크립트의 간격 방법을 설정할 수 있습니다 당신은 명확 간격으로 타이머를 중지 할 수 있습니다.

타이머를 중지 할 때마다 아래 행을 호출하십시오. 위해 clearInterval 전화를 놓친 경우, API는

clearInterval(this.apiTimer); 

Answer 2

당신이 좋아 할 수있는 모든 n 초 후 지속적으로 트리거됩니다

여기

alive = true; 

constructor(private appTest : AppTestService) { 

    // start calling your api every 10 secs 
    Observable.timer(0,10000) 
    .takeWhile(() => this.alive) // only fires when component is alive 
    .subscribe(() => { 
     this.appTest.getData().subscribe(data=> { 
      console.log(data); 
     }) 
    }); 

} 

ngOnDestroy(){ 
    this.alive = false; // switches your Observable off 
} 

가 그 작업 데모입니다, 보라하시기 바랍니다

를

https://stackblitz.com/edit/angular-interval-observable