2017-09-16 13 views
0

私はカウンター機能を実装したいと考えているイオニック/角度アプリを持っています。 私は1つを見つけました:https://github.com/btroncone/learn-rxjs/blob/master/recipes/smartcounter.md いい仕事です。すべてのクレジットはbtronconeに!Rsjx switchmapがタイマー(0,20)を戻せなかったのはなぜですか?

私はこれをコンポーネントとして実装し始めましたが、間違いに直面しましたが、わかりません。

これは、これまでのコードです:

import { Component, OnInit, OnDestroy, Input } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { Subscription } from 'rxjs/Subscription'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/timer'; 

@Component({ 
    selector: 'number-tracker', 
    template: `<h3> {{ currentNumber }}</h3>` 
}) 
export class CounterComponent implements OnDestroy { 
//export class NumberTrackerComponent implements OnDestroy { 
    @Input() 
    set end(endRange: number) { 
    this._counterSub$.next(endRange); 
    } 
    public currentNumber = 0; 
    private _counterSub$ = new Subject(); 
    private _subscription : Subscription; 

    constructor() { 
    this._subscription = this._counterSub$ 
     .switchMap(endRange => { 
     return timer(0, 20) 
      .mapTo(this.positiveOrNegative(endRange, this.currentNumber)) 
      .startWith(this.currentNumber) 
      .scan((acc, curr) => acc + curr) 
      // .delayWhen(i => { 
      // easing here 
      // }) 
      .takeWhile(this.takeUntilFunc(endRange, this.currentNumber)); 
     }) 
     .subscribe(val => this.currentNumber = val); 
    } 

    private positiveOrNegative(endRange, currentNumber) { 
    return endRange > currentNumber ? 1 : -1; 
    } 

    private takeUntilFunc(endRange, currentNumber) { 
    return endRange > currentNumber 
     ? val => val <= endRange 
     : val => val >= endRange; 
    } 

    ngOnDestroy() { 
    this._subscription.unsubscribe(); 
    } 
} 

そして、私が得たエラーは次のとおりです。

enter image description here

私は例を発見したが、これは、観察を返して:

clicks.switchMap(click => { 
    return Rx.Observable.interval(500) 
}) 

ご協力いただければ幸いです。

+0

にそれは 'インポート「rxjs /追加/ /観測timer''と' Observable.timerする必要があります(0、20) 'となる。 – cartant

答えて

0

それが最後にverry簡単だった、私は追加する必要がありました:

import { timer } from 'rxjs/observable/timer' 

すべてのクレジットhttps://github.com/btroncone

関連する問題