Заставить подписку ждать в Angular 4 для субъекта

Question

У меня есть текстовое поле в моем HTML, которое вызывает внутреннюю службу в режиме реального времени на основе введенного текста. Если пользователь вводит что-то вроде 'abc', мой сервис возвращает массив объектов, который имеет это имя 'abc'.

Для этого я использую Observable и Subject и возвращаю обработанный сервис в своем компоненте. Пожалуйста, смотрите код.

HTML-код

<input size="30" type="text" (keyup)="searchTerm$.next($event.target.value)">

Код компонента

import { Subject } from 'rxjs/Subject';

searchString$ = new Subject<string>();

constructor() {

    this.searchString$.debounceTime(500)
    .distinctUntilChanged()
      .map(searchText => {
        return this.backEndService.fetchSearchStringData(searchText);
      })
      .subscribe(result => {
        console.log('result');
        console.log(JSON.stringify(result));

      });
}

Когда я набираю 'abc', он вызывает метод fetchSearchStringData. Сервисный вызов - не что иное, как простой вызов restService.post, а затем установка объекта является наблюдаемой. Использование этих данных для фильтрации чего-либо и возврата окончательного массива.

Но мой компонент.subscribe нам вызывается первым и только один раз, и он показывает неопределенное значение. (Где я утешен. Ведение журнала "результат").

Как мне убедиться, что я получу данные, как только они получат возврат от сервиса при моей подписке на компонент?

Заранее спасибо.

Answer 1

Я не могу быть уверен, если вы не отправите код о том, как вы делаете fetchSearchStringData вызов. Но внутри вам нужно вернуть Обещание или Наблюдение. Похоже, вы ничего не возвращаете, таким образом, consolte.log печать undefined,

Тогда вы можете использовать switchMap развернуть результат в поток.

this.searchString$.debounceTime(500)
  .distinctUntilChanged()
  .switchMap(searchText => {
    return this.backEndService.fetchSearchStringData(searchText);
  })
  .subscribe(result => {
    console.log('result');
    console.log(JSON.stringify(result));
  });