Попытка фильтрации через Rx JS данных, возвращаемых через HttpClient Angular, который возвращает данные из таблицы базы данных. - PullRequest
Новая
       6

Попытка фильтрации через Rx JS данных, возвращаемых через HttpClient Angular, который возвращает данные из таблицы базы данных.

0 голосов
/ 09 марта 2020

Берет героев Angular и добавляет к ним столбец рейтинга. Рейтинги содержат такие значения, как хороший, очень хороший, плохой

Попытка воспользоваться Rx JS, оператором фильтра, для этого. При просмотре https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter примера 2 кажется, что я хочу 

// RxJS v6+
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

//emit ({name: 'Joe', age: 31}, {name: 'Bob', age:25})
const source = from([
  { name: 'Joe', age: 31 },
  { name: 'Bob', age: 25 }
]);
//filter out people with age under 30
const example = source.pipe(filter(person => person.age >= 30));
//output: "Over 30: Joe"
const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`));

, однако при использовании httpclient он не работает и выдает ошибку « Свойство» 'не существует в типе' Hero [] '. ts (2339)"

  isVeryGoodAd(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl).pipe(
      filter(heroes => heroes.rating === 'verygood')
      ) 
    ;
  }

Как использовать httpclient с фильтром Rx JS для удаления нежелательных значений при возврате Observable, который я сможет подписаться на?

1 Ответ

1 голос
/ 09 марта 2020

Оператор filter в первом примере отличается от функции массива filter.

Rx JS filter

Rx JS filter выберет чтобы пропустить наблюдаемую ценность на основе условия. Это условие для всего объекта.

Первый пример работает, потому что from испускает каждый элемент последовательно, а затем filter воздействует на каждый элемент индивидуально, отбрасывая те, которые не соответствуют условию. Если вы удалите фильтр, вы увидите, что в метод подписки поступают 2 элемента последовательно.

DEMO: https://stackblitz.com/edit/angular-ef3udf

Запрос http возвращает только одно значение , filter пытается проверить условие по всему ответу и жалуется, что свойство rating не существует в массиве (это именно то, что говорит сообщение об ошибке).

Фильтр массива

Array filter вернет элементы в массиве, соответствующие условию. Он проверяет условие для каждого элемента в массиве.

Решение

Вы получаете один объект из HttpClient - ответа. Вы хотите условно удалить некоторые элементы. Это преобразование - вы начинаете с массива и возвращаете подмножество этого массива.

Для преобразований в канале вы используете оператор Rx JS map (не путать с функцией массива !). Затем вы можете применить функцию массива filter внутри Rx JS map. 

isVeryGoodAd(): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl).pipe(
    map(heroes => heroes.filter(hero => hero.rating === 'verygood'))
  );
}
...