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

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

0 голосов
/ 24 апреля 2018

У меня есть текстовое поле в моем 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));

      });
}

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

Но мой компонент. Подпишется, чтобы нас вызывали сначала и только один раз, и он показывает неопределенное значение.(Где я consoled.logging 'результат').

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

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

1 Ответ

0 голосов
/ 24 апреля 2018

Я не могу быть уверен, если вы не отправите код о том, как вы делаете 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));
  });
...