Rxjs 加减按钮，最小最大值而不是负值

Question

如何避免负值？

我试过使用过滤器，但

如果该值变为负数

你应该点击两次才能得到

它是积极的。

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));

如果我想添加最大值？

更新

这需要 min 有点乱^^

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));

Answer 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 时）。

Rxjs 加减按钮，最小最大值而不是负值

Rxjs plus minus button with min max and not negative values

rxjs5