switchMap 不是函数

Question

我已经按照教程 Angular Tour of Heroes 和其他一些教程进行操作，现在我正在尝试使用 Angular 2 构建应用程序。基本上，当我们使用 Subject 监听更改时，我们可以等待几秒钟，这样请求就不会给网络带来负担。

这是我的代码：

import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import {Employee} from "../employee";

@Injectable()
export class EmployeeSearchService {

  private getPersonalURL:string = 'api/employee';   // I'm using mock, btw

  constructor(private http:Http) { }

  search(term:string): Observable<Employee[]> {
    return this.http.get(`api/employee/?firstName=${term}`)
      .map(response =>  response.json().data as Employee[])
      .catch(this.handleError);
  }

  searchEmployees(term: Observable<string>): Observable<Employee[]> {
    return term.debounceTime(200)
       .distinctUntilChanged()
       .switchMap(term => this.search(term)); // here is the error
  }

  private handleError(error: any): Promise<any> {
    console.error('Error on EmployeeSearchService', error);
    return Promise.reject(error.message || error);
  }

}

这是调用组件：

import { Component, OnInit } from '@angular/core';
import {Subject} from "rxjs/Subject";
import { EmployeeService } from '../employee.service';
import { Employee } from '../employee'
import {EmployeeSharedService} from "../employee-shared.service";
import {EmployeeSearchService} from "../employee-search/employee-search.service";

@Component({
  selector: 'employee-list',
  providers: [ EmployeeService ],
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees: Employee[];
  selectedEmployee: Employee;
  sortAsc: boolean;

  searchQuery = new Subject<string>();

  constructor(private employeeService:EmployeeService, private employeeSearchService:EmployeeSearchService, private employeeSharedService:EmployeeSharedService) {
    this.sortAsc = true;

  }

  ngOnInit() {    // called from here
    this.employeeSearchService.searchEmployees(this.searchQuery)
        .subscribe(result => {
          this.employees = result;
          if(!result) {
            this.getAllEmployees();
          }
        });
  }

  getAllEmployees(): void {
      // calling get all in service
  }

}

有错误提示

TypeError: term.debounceTime(...).distinctUntilChanged(...).switchMap is not a function

我是否遗漏了一些东西，比如导入或其他东西？因为确切的代码和导入与 Angular Tour of Heroes 教程相同，而我的作品。但是这个不是。

Answer 1

您还需要添加switchMap 运算符：

import 'rxjs/add/operator/switchMap';

Answer 2

这是罪魁祸首 searchQuery = new Subject<string>();

Subject 不是可观察的，但您的函数要求一个，所以像这样修改它

ngOnInit() {
    this.employeeSearchService.searchEmployees(this.searchQuery.asObservable())...
}