1つの数字からもう1つの数字に増減する方法は、イオン2の数字を表示する方法ですか？

Question

地理位置から速度を得て、それを画面に表示します。いくつかのケースでは、数値は前の数値とは大きく異なり、ギャップ内の数値を示す遷移を作成したいと考えています。
例：

speed 1 -> 80 
speed 2 -> 90 
display -> 80 81 82 83 84 85 86 87 88 89 90 

私はいくつかのソリューションを試みたが、「遷移は」動作しませんでした。

位置tracker.ts

startTracking(){ 
    this.watchSubscription = this.watch.subscribe((resp) => { 
    this.zone.run(() => { 
     var speedToSet = resp.coords.speed; 
     this.setSpeed(speedToSet); 
    }); 
    }, error => { 
    console.log("Error: " + JSON.stringify(error)); 
    }); 
} 

setSpeed(speedarg){ 

    if (speedarg == this.speed){ 
    return; 
    } 

    if (speedarg > this.speed){ 

    let val = this.speed; 
    for (var i = val; i <= speedarg; i++){ 
     setTimeout(() => { 
     this.speed = i; 
     }, 30); 
    } 
    } else { 

    let val = this.speed; 
    for (var i = val; i >= speedarg; i--){ 
     setTimeout(() => { 
     this.speed = i; 
     }, 30); 
    } 
    } 
} 

home.html

<ion-grid> 
    <ion-row> 
    <ion-col> 
    Speed: {{locationTracker.speed}} 
    </ion-col> 
    </ion-row> 
</ion-grid> 

Iは、上記の解決策を試みたが、最後の番号が更新されます。

例：

speed 1 -> 80 
speed 2 -> 90 
display -> 90 

Answer 1

角度でこれを行うための適切な方法は、観測を利用することであろう。

補間値

は、まず、値をinteprolates単純な関数をcosider。あるスピードから別のスピードに向かうときにそれらの数字を表示する必要があります。例えば

const interpolate = (from, to) => 
    Array.from({length: Math.abs(to - from) + 1}) 
    .map((_, i) => to - from > 0 ? from + i : from - i) 

、interpolate(1, 4)戻る[1, 2, 3, 4]。降順を処理します。

速度を変更するストリーム

速度を変更するストリームが必要です。これはBehaviorSubjectになります。つまり、作成時に自動的に生成されるデフォルト値を設定することができます。まず、ゼロから始めます。

public speed$ = new BehaviorSubject<number>(0) 

表示ストリーム

は、私たちの目標は、画面に表示されるべき値のストリームに速さのストリームを変換することです。我々は同様に前の値を取得するためにpairwiseを使用

display$ = this.speed$ 
    .pairwise() 
    .switchMap(([oldSpeed, newSpeed]) => { 
    return Observable.of(...interpolate(oldSpeed, newSpeed)) 
     .map(x => Observable.of(x)) 
     .map(o => o.delay(30)) 
     .concatAll() 
    }) 

• 。初期状態が0の場合、速度を5に変更すると[0, 5]が出力されます。それ以降の速度を2に変更すると、[5, 2]が出力されます。
• 上記の値は、補間に必要な値です。 [5, 2]については、すぐに5,4,3,2（配列ではなく、別の値として）を放出する観測値を作成します。
• 次に、これをan observable which emits that same valueに出力するたびに、mappingによって簡単に高次ストリームに変換します。
• これにより、これらの内部ストリームのそれぞれに対してcreate a delayが許可されます。 30ミリ秒を使用しますが、希望に応じて変更することができます。
• 今度はconcat all of these inner streams togehterにする必要があります。これは、正確に、私たちが望むようなものです。それらの間に30ミリ秒の遅延で放出される値が観測可能です。
• この種の観測可能な値は、新しい値のペアが出現するたびに出力されます。 switchMap to flatten itを使用しますが、遷移が完了する前に速度が変更されている場合は、次の変更に切り替えることもできます（mergeMapと比較すると、フラットなストリームが重複する可能性があります）。
• これは、私たちに望ましいストリームを与えます。

---

これですべてです！ちょうど12行のコード。

ここはa Blitzです。