Question

试图搜索槽形外部API天气服务。

Api经过测试，可以正常工作。

问题：在搜索栏中输入值，并且未调用servis的主要Search方法。这就是为什么未发送请求的原因。

我遵循有角度的官方文档中的教程：https://angular.io/tutorial/toh-pt6#search-by-name

这不起作用。

搜索组件：

export class SearchCityComponent implements OnInit {
  cities$: Observable<City[]>
  private searchTerms = new Subject<string>()

  constructor(private weaterService: WeatherService) {}

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

  ngOnInit(): void {
    this.cities$ = 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.weaterService.searchCities(term))
    )
  }
}

服务：

 /* GET cities whose name contains search term */
  searchCities(term: string): Observable<City[]> {
    if (!term.trim()) {
      return of([])
    }
    return this.http
      .get<City[]>(`${this.citiesUrl}/?query=${term}`, httpOptions)
      .pipe(
        tap(_ => this.log(`found cities matching "${term}"`)),
        catchError(this.handleError<City[]>("searchCities", []))
      )
  }

当我输入搜索内容时，输入一些值：

在ngOnInit（）的搜索组件中，最后一行代码不是是来自服务的搜索功能？

 switchMap((term: string) => this.weaterService.searchCities(term))

Answer 1

您忘记订阅switchMap！

按照angular docs：

一个Observable实例仅在有人订阅时才开始发布值。您可以通过调用实例的subscribe()方法进行订阅，并传递观察者对象以接收通知。

Answer 2

可观察对象仅在需要时才会被触发，以告知您需要它的观察对象，您必须订阅它：

    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.weaterService.searchCities(term))
    ).subscribe()

Answer 3

您的实现没问题。您只需要使用cities$管道在模板中打开async可观察对象即可。建议尽可能使用async管道。只是使代码不再那么冗长。

做这样的事情会有所帮助：

<ul>
  <li *ngFor="let city of cities$ | async">
    {{ city.name }}
  </li>
</ul>

这是您推荐的Working Sample StackBlitz。

搜索服务器数据在Angular中不起作用

3 个答案: