angular - switchMap är inte en funktion

Jag har följt tutorialen Angular Tour of Heroes och några andra, nu försöker jag bygga appar med Angular 2. I princip när vi lyssnar på förändring med Subject, kan vi vänta några sekunder så att förfrågan inte belastar nätverket.

Här är min kod:

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

}

Och detta är den anropande komponenten :

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
  }

}

Det finns ett fel som säger

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

Saknar jag något, som import eller något annat? För exakt kod och import är samma som i Angular Tour of Heroes-handledningen, och min fungerar. Men den här gör det inte.

Svar #1

Du behöver också lägga till switchMap-operatorn:

import 'rxjs/add/operator/switchMap';

Svar #2

Här är boven searchQuery=new Subject<string>();

En Subject är inte ett observerbart, men din funktion ber om ett, så ändra det så här

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

Relaterade artiklar