让 Subscribe 在 Angular 4 等待 Subject

Question

我的 HTML 中有一个文本字段，它根据输入的文本实时调用后端服务。如果用户输入类似 'abc' 的内容，我的服务 return 是一个具有此 'abc' 名称的对象数组。

我正在为此使用 Observable 和 Subject，并且我在我的组件中 returning 处理过的服务。请看代码。

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 调用，然后设置对象是可观察的。使用该数据过滤某些内容并 returning 最终数组。

但是我的组件 .subscribe us 第一次被调用，而且只有一次，它显示未定义的值。（我在哪里 consoled.logging 'result'）。

我如何确保在我订阅的组件中从服务中获取 return 后获取数据？

提前致谢。

Answer 1

我不能确定，除非你 post 编写了如何进行 fetchSearchStringData 调用的代码。但是在里面你需要 return 一个 Promise 或 Observable。看起来你没有 returning 任何东西，因此 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));
  });

让 Subscribe 在 Angular 4 等待 Subject

Making Subscribe to wait in Angular 4 for Subject

observable

rxjs

subject-observer

angular2-observables

angular