使订阅在 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 电话的代码，否则我无法确定。但是在里面你需要返回一个 Promise 或 Observable。看起来你没有返回任何东西，因此 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));
  });