Угловая 4 + RxJS фильтрация

dpdragnev спросил: 14 ноября 2017 в 05:28 в: angular

Я пытаюсь обернуть голову вокруг RxJS, и у меня есть вопрос. Чтобы лучше понять, как все работает, я запустил новое пустое приложение Angular 4, созданное с помощью Angular CLI. В нем я запускаю следующий код:

this.http.get('./src/app/data/products.json')
    .map(res => res.json())
    .filter((item: any) => {
      let price = parseFloat(item.price);
      return price < 5.0 && price >= 2.5;
    })
    .subscribe((list: Array<ProductModel>) => {
      this.error = '';
      this.products = list;
    },
    error => {
      this.error = error;
    });

Проблема в том, что фильтр получает весь объект в качестве параметра и я не могу фильтровать отдельные элементы. Используя RxJS в неугловом решении, я использовал этот код:

let products = Observable.create(observer => {
    let xhr = new XMLHttpRequest();

    let onLoad = () => {
        let productsList = JSON.parse(xhr.responseText);
        observer.next(productsList);
        observer.complete();
    }

    xhr.addEventListener('load', onLoad);

    xhr.open('GET', 'products.json');
    xhr.send();

    return () => {
        console.log('cleanup');
        xhr.removeEventListener('load', onLoad);
        xhr.abort();
    }
})
.flatMap(Observable.from)
.filter(item => {    
    let price = parseFloat(item.price);
    return price < 5.0 && price >= 2.5;
});

let subscr = products.subscribe(
    product => {
        let li = document.createElement('li');
        li.innerText = product.product_name + ' ' + product.price;
        list$.appendChild(li);
    },
    error => {
        console.log(`Error: ${error}`);
    },
    () => {
        console.log('complete');
        subscr.unsubscribe();
    }
);

Разница в том, что я использовал flatMap , но если я попробую тот же код в версии Angular, я получу: Аргумент типа '{(ish: ObservableInput, scheduler ?: IScheduler): Observable; (ish: ArrayLike, ... 'нельзя назначить параметру типа' (value: any, index: number) = > ObservableInput'.Типы параметров 'scheduler' и 'index' несовместимы. Тип 'number' равен нельзя присвоить типу "IScheduler".

Мне просто интересно, почему один и тот же сценарий дает разные результаты. Использует ли Angular другой вариант RxJS? Каков наиболее эффективный способ фильтрации результатов? в англоязычной версии?

Спасибо.

0 ответов