rxjs - ejemplo - behaviorsubject angular 6

Filtrar un observable usando valores de otro observable.

Question

Tengo dos observables:

1. Un observable que representa una lista de entradas de casilla de verificación.
2. Un observable que representa un flujo de eventos provenientes del servidor.

Me gustaría filtrar el segundo observable usando valores del primero.

Los valores recibidos del servidor incluyen una propiedad de tag , que corresponde a los valores en la lista de casilla de verificación. El resultado observable de la combinación de los dos anteriores solo produciría valores del servidor cuya propiedad de tag se incluye en el conjunto de casillas de verificación marcadas.

Answer 1

Aparentemente, lo que necesitaba era una combinación de select , filter y switchLatest . He escrito un pequeño caso de prueba que demuestra esto: https://gist.github.com/igstan/d5b8db7b43f49dd87382#file-observable-filter-observable-js-L36-L45

Answer 2

Para filtrar el flujo A usando los valores del flujo B, debe observar el flujo B y usar los últimos valores para filtrar el flujo A.

Use el switch() para transformar B observable a un observable produciendo valores desde A observable.

checkedInputValuesSource
.map(function (options) {
return dataSource
.filter(function (value) {
return options.indexOf(value) !== -1;
});
})
.switch()
.subscribe(function (x) {
console.log(''out: '' + x);
});

El uso de switch() supone que dataSource es un cold .

Ejemplo usando interval() para producir datos ficticios:

var input,
checkedInputValuesSource,
dataSource;
input = document.querySelectorAll(''input'');
// Generate source describing the current filter.
checkedInputValuesSource = Rx.Observable
.fromEvent(input, ''change'')
.map(function () {
var inputs = document.querySelectorAll(''input''),
checkedInputValues = [];
[].forEach.call(inputs, function (e) {
if (e.checked) {
checkedInputValues.push(e.value);
}
});
return checkedInputValues;
})
.startWith([]);
// Generate random data source (hot).
dataSource = Rx.Observable
.interval(500)
.map(function () {
var options = [''a'', ''b'', ''c''];
return options[Math.floor(Math.floor(Math.random() * options.length))];
})
.do(function (x) {
console.log(''in: '' + x);
})
.share();
checkedInputValuesSource
.map(function (options) {
return dataSource
.filter(function (value) {
return options.indexOf(value) !== -1;
});
})
.switch()
.subscribe(function (x) {
console.log(''out: '' + x);
});

<script src=''https://rawgit.com/Reactive-Extensions/RxJS/v.2.5.3/dist/rx.all.js''></script>
<input type=''checkbox'' value=''a''>
<input type=''checkbox'' value=''b''>
<input type=''checkbox'' value=''c''>

Este ejemplo producirá una salida similar a:

in: c
in: a
out: a
in: b
in: c
out: a
in: b
in: a

Where in refleja todas las entradas generadas y b los datos que pasan el filtro. El filtro se ajusta marcando las entradas de la casilla de verificación, que reflejan los valores "a", "b" y "c".

Answer 3

Puedes usar withLatestFrom . .

source.withLatestFrom(checkboxes, (data, checkbox) => ({data, checkbox}))
.filter(({data, checkbox}) => ...)

Aquí, las checkboxes son observables y representan una lista de entradas de casillas de verificación. source es un observable que representa un flujo de eventos provenientes del servidor. En la función de filtro, puede verificar si los datos son válidos en comparación con los ajustes de la casilla de verificación y dejarlos pasar.

Observe que es importante que las checkboxes emitan al menos 1 valor antes de que la transmisión pueda emitir algo.

PD. Con respecto a otras respuestas, esta solución funciona incluso si la fuente es cold .