Заполнение наблюдаемых данных не работает, когда фильтр выполняется в функции, а не с помощью действия подписки с использованием RxJS

Question

Я пытаюсь выполнить некоторую фильтрацию данных, возвращаемых из внешнего источника, используя фильтр Rx JS в Observables. Однако, когда код находится в библиотеке (функции) и не отфильтрован на уровне моего пользовательского интерфейса, я получаю все возвращаемые записи, а не только записи, покрывающие фильтр.

Мне удалось создать простую версию Чтобы проиллюстрировать проблему:

import { Observable, of } from 'rxjs';
import { filter } from 'rxjs/operators';

export interface A {
    name:string;
    age:number;
}

export function Get(Age:number):Observable<A[]> {
    const source:Observable<A[] | null> = of([
      { name: 'Joe', age: 31 }, 
      { name: 'Bob', age: 25 }
    ]);
    console.log(Age)
    return source.pipe(filter( (person, index) => person[index].age >= Age));  
}

const example = Get(30).subscribe(val => {
   val.forEach((OneRecord:A) => {
      console.log(OneRecord)
   })
});

Возвращает обе записи, хотя фильтр должен содержать только 1 запись.

30
>{name: 'Joe', age: 31}
>{name: 'Bob', age: 25}

Однако, если я перенесу в функцию subscribe () и console.log, фильтрация будет выполнена правильно. Я не уверен, почему фильтр не ограничивает то, что возвращается в наблюдаемом?

Answer 1

В приведенном выше фильтре массив всех лиц передается в качестве первого параметра, а не каждый отдельный человек, так как ваша наблюдаемая потоковая передача массива людей (Observable<A[]>).

Чтобы отфильтровать элементы из этого список, который вам нужно будет сопоставить наблюдаемым значениям в потоке с новым значением, которое будет фильтровать несоответствующие записи из массива:

export function Get(Age:number):Observable<A[]> {
    const source: Observable<A[] | null> = of([
        { name: 'Joe', age: 31 }, 
        { name: 'Bob', age: 25 }
    ]);

    console.log(Age);

    return source.pipe(
        map(people => people.filter(person => person.age >= Age)
    );
}