2017-01-07 2 views
0

負の値を避けるにはどうすればよいですか?負の値ではなく、最小値を持つRxjsプラスのマイナスボタン

値は、あなたがそれを肯定

を取得するために二回クリックする必要があります

負になった場合、私は、フィルタが、

で試してみました。

const start = 0; 
    const min = 0; 
    const max = 3 
    var plus$ = Observable.fromEvent(this.getNativeElement(this.btnPlus), 'click'); 
    var minus$ = Observable.fromEvent(this.getNativeElement(this.btnMinus), 'click'); 
    var plusOrMinus$ = Observable.merge(plus$.mapTo(1), minus$.mapTo(-1)); 
    plusOrMinus$ 
    .scan((acc,curr) => acc+curr, start) 
    .filter(x => x > min) 
    .subscribe(x => console.log(x)); 

最大値を追加したい場合は、

UPDATE

これそれは少し厄介だ分 のための作業を行う^^

const start = 0; 
    const min = 0; 
    const max = 3 
    const plus$ = Observable.fromEvent(this.getNativeElement(this.btnPlus), 'click'); 
    const minus$ = Observable.fromEvent(this.getNativeElement(this.btnMinus), 'click'); 
    const plusOrMinus$ = Observable.merge(plus$.mapTo(1), minus$.mapTo(-1)); 
    plusOrMinus$ 
    .scan((acc,curr) =>{ 
     if(acc === start){ 
     if(curr > 0){ 
      return acc+curr; 
     } 
     } 
     if(acc > start){ 
     return acc+curr; 
     } 
     else{ 
     throw new Error('0 value'); 
     } 
    }, 
    start) 
    .catch((e,obs)=> obs.startWith(0)) 
    .subscribe(x => console.log(x)); 
+1

値が0より小さくならないように '.map(x => Math.max(0、x))'を追加してみませんか? – Meir

+0

マイナスでプラスの数より多くの時間をクリックすると、accの値が依然として負であるため(フィルタと同じ) – Whisher

答えて

1

私が正しくあなたの質問を理解していれば、あなたはさせて頂いてからご入力(+ 1/-1)を防止したいです合計は範囲外になります(最小、最大)。これを行うには、Math.min(nextVal, max)Math.max(nextVal, min)を使用できます。結局あなたはMath.max(Math.min(nextVal, max), min)になります。次に、.scan()関数でこれを使用しています。

const incStream = Rx.Observable.fromEvent(document.getElementById('button_inc'), 'click').mapTo(1); 
 
const decStream = Rx.Observable.fromEvent(document.getElementById('button_dec'), 'click').mapTo(-1); 
 

 
const min = 0; 
 
const max = 3; 
 

 
Rx.Observable.merge(incStream, decStream) 
 
    .scan((acc, curr) => Math.max(Math.min(acc + curr, max), min), 0) 
 
    .startWith(0) 
 
    .distinctUntilChanged() 
 
    .subscribe(val => document.getElementById('result').value = val);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script> 
 
    <input type='button' value='+1' id='button_inc' /> 
 
    <input type='button' value='-1' id='button_dec' /> 
 
    <input type='text' id='result' />

あなたの最初のスキャン値が到着する前.startWith(0)は、ストリームに放出さ0の値を持つために使用されます。 .distinctUntilChanged()は、同じ値で結果を更新しないために使用されます(たとえば、+1を複数回使用するとmaxに達したとき)。

関連する問題