Angular 5、实现一个搜索输入

Question

我正在努力遵循这个example

但我没有找到它不起作用的原因。这是我的代码

import { Subject } from "rxjs/Subject";
import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import {
  SearchFullText,
  SearchFullTextService,
} from "../search-full-text.service";
import { debounceTime, distinctUntilChanged, switchMap } from "rxjs/operators";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
      persons$: Observable<SearchFullText[]>;
      private searchValues = new Subject<string>();

  constructor(private searchService: SearchFullTextService) {}
  // Push a search term into the observable stream.
  search(searchValue: string): void {
    this.searchValues.next(searchValue);
  }

  ngOnInit(): void {
    this.persons$ = this.searchValues.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((searchValue: string) => {
        console.log("switchMap");
        return this.searchService.searchFullText(searchValue)
     })
    );
  }
}

switchMap 没有执行。我错过了什么？

Answer 1

问题是您没有订阅 switchMap observable.If 您订阅了它，您的代码将执行：

switchMap((searchValue: string) => {
    console.log("switchMap");
    return this.searchService.searchFullText(searchValue)
}).subscribe(value => doSomething);

Angular 5、实现一个搜索输入

Angular 5, Implementing a Search Input

search

angular