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));
  });

使订阅在Angular 4中等待主题

1 个答案: