无法复制 Angular：英雄之旅搜索行为，Observers 问题

Question

我正在尝试在 Angular 9 中实现带有自动完成建议的搜索栏，它在英雄之旅教程中有效，但是当我尝试复制它时，searchTerms 管道什么都不做（从未调用服务).

我在英雄之旅应用程序中检查了 searchTerms 的观察者，创建后立即它已经有一个观察者。然而，在我的应用程序中，情况并非如此，所以主要问题是：英雄之旅应用程序中的 searchTerms 何时获得其观察者？

这有效，调用服务

import { Component, OnInit } from '@angular/core';

import { Observable, Subject } from 'rxjs';

import {
  debounceTime, distinctUntilChanged, switchMap
} from 'rxjs/operators';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: [ './hero-search.component.css' ]
})
export class HeroSearchComponent implements OnInit {
  heroes$: Observable<Hero[]>;
  private searchTerms = new Subject<string>();

  constructor(private heroService: HeroService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    // one observer
    console.log(this.searchTerms.observers);
    this.heroes$ = this.searchTerms.pipe(
      // wait 300ms after each keystroke before considering the term
      debounceTime(300),

      // ignore new term if same as previous term
      distinctUntilChanged(),

      // switch to new search observable each time the term changes
      switchMap((term: string) => this.heroService.searchHeroes(term)),
    );
  }
}

这不是

import {Component, OnInit} from '@angular/core';
import {Observable, Subject} from "rxjs";
import {SearchService} from "../search.service";
import {debounceTime, distinctUntilChanged, switchMap} from "rxjs/operators";

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  suggestions$: Observable<string[]>;
  private searchTerms = new Subject<string>();

  constructor(private searchService: SearchService) {}

  search(value: string): void {
    this.searchTerms.next(value);
  }

  ngOnInit(): void {
    // 0 Observers, service from pipe is never called
    console.log(this.searchTerms.observers);
    this.suggestions$ = this.searchTerms.pipe(
      debounceTime(300),

      distinctUntilChanged(),

      switchMap((term: string) => this.searchService.getSuggestions(term)),
    );
  }
}

Answer 1

我认为您还没有订阅 suggestion$ 可观察对象，这就是为什么它发出的值没有在任何地方使用导致没有反馈的原因。

无法复制 Angular：英雄之旅搜索行为，Observers 问题

Unable to replicate Angular: Tour of heroes search behaviour, problem with Observers

rxjs

typescript

angular9