typescript switchMap 不是函数

switchMap is not a function

提问by imeluntuk

I have followed tutorial Angular Tour of Heroes and some other, now I'm trying to build apps with Angular 2. Basically when we're listening to change with Subject, we can wait for some seconds so that request won't burden the network.

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

Here is my code :

这是我的代码：

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);
  }

}

And this is the calling component :

这是调用组件：

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
  }

}

There are error that says

有错误说

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

Am I missing something, like import or other thing? Because exact code and import are same as Angular Tour of Heroes tutorial, and mine works. But this one isn't.

我是否缺少某些东西，例如导入或其他东西？因为确切的代码和导入与 Angular Tour of Heroes 教程相同，我的作品。但这个不是。

采纳答案by Teedeez

Here is the culprit searchQuery = new Subject<string>();

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

A Subjectis notan observable, but your function is asking for one, so modify it like this

一个Subject是没有可观察到的，但你的功能要求之一，所以修改它像这样

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

回答by Poul Kruijt

You also need to add the switchMapoperator:

您还需要添加switchMap运算符：

import 'rxjs/add/operator/switchMap';