api 管道打字稿中的两个搜索变量

Question

我确定我在这里做了一些愚蠢的事情，但我无法弄清楚如何使用我正在使用的方法传递 2 个变量，该方法利用了一些 rxjs。我有 2 个用于导航应用程序的搜索变量，from 和 to，它们被输入到我的 html 中的 searchFrom 和 searchTo 框中，但我不知道如何使用它。要么 searchTerms 需要以某种方式成为一个数组，要么……某种东西。

export class AppComponent implements OnInit {
  mapResult: any;
  to: any;
  from: any;

  private searchFrom: Subject<string>;
  private searchTo: Subject<string>;

  constructor(private mapQuestService: MapQuestService) {  }

  search(to: string): void {
    this.searchTo.next(to); }

  search(from: string): void {
      this.searchFrom.next(from); }



  ngOnInit() {

this.from = 'boston';
this.to = 'poughkeepsie';

this.searchTerms = new Subject<string>();
this.searchTerms.pipe(

    debounceTime(1000),

    distinctUntilChanged(),
    switchMap((to, from) => {
      return this.mapQuestService.getMap(this.to, this.from);

  ))
  .subscribe((result: any) => {

    this.mapResult = result.items;
  });
}

}

有什么想法吗？

Answer 1

尝试使用 combineLatest 而不是另一个主题：

this.searchTerms = combineLatest(this.to, this.from);
this.searchTerms.pipe(
  debounceTime(1000),
  distinctUntilChanged(),
  switchMap((to, from) => this.mapQuestService.getMap(to, from))
)
.subscribe((result: any) => this.mapResult = result.items);

Stackblitz Demo two observables

api 管道打字稿中的两个搜索变量

two search variables in api pipe typescript

mapquest

typescript

angular