rxjs как пройти наблюдаемую карту - PullRequest
Новая
       6

rxjs как пройти наблюдаемую карту

0 голосов
/ 01 ноября 2018

Я новичок в angular и rxjs - в основном у меня есть конвейерная функция, которая принимает несколько операторов, и один из них берет 'map' с троичным, который является либо пустым массивом, либо другой наблюдаемой, которая является значением из http запроса: 

search = (text: Observable<string>) => {
  return text.pipe(
    debounceTime(200),
    distinctUntilChanged(),
    map(term => term.length < 3 ? [] : performSearch(text))
  );
}


performSearch(searchTerm: Observable<string>): Observable<Object> {
  return this.http.get('/api/header-search-results/con').pipe(
    map(res => {
      console.log(res);
      return res;
    })
  );
}

Я знаю, что делаю что-то не так, я просто не знаю, что - я получаю сообщение об ошибке в браузере:

Невозможно найти отличающийся вспомогательный объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы

Буду признателен за любые указания

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Если вам нужно вернуть пустой массив, просто оберните его of() (в RxJS 6), а затем вместо map используйте mergeMap, который подпишется на возвращаемый внутренний Observable. 

import { of } from 'rxjs';

...

search = (text: Observable<string>) => {
  return text.pipe(
    debounceTime(200),
    distinctUntilChanged(),
    mergeMap(term => term.length < 3 ? of([]) : performSearch(text))
  );
}
0 голосов
/ 01 ноября 2018

в вашей реализации оператор merge возвращает либо наблюдаемый объект, либо объект. Я предлагаю вам использовать только объекты или только наблюдаемые. Если вы выбираете второе решение, вам также следует подумать об операторе, который сгладит ваш поток: concatMap, mergeMap, switchMap, ... в соответствии с вашими потребностями.

Пример реализации: 

search = (text: Observable<string>) => {
  return text.pipe(
    debounceTime(200),
    distinctUntilChanged(),
    concatMap(term => term.length < 3 ? of([]) : performSearch(text))
  );
}


performSearch(searchTerm: Observable<string>): Observable<Object> {
  return this.http.get('/api/header-search-results/con').pipe(
    map(res => {
      console.log(res);
      return res;
    })
  );
}
...