He seguido el tutorial Angular Tour of Heroes y algunos otros, ahora estoy tratando de crear aplicaciones con Angular 2. Básicamente, cuando escuchamos cambiar con el Asunto, podemos esperar unos segundos para que la solicitud no sobrecargue la red. .

Aquí está mi código:

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

Y este es el componente de llamada:

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

Hay un error que dice

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

¿Me estoy perdiendo algo, como importar u otra cosa? Porque el código exacto y la importación son los mismos que el tutorial de Angular Tour of Heroes, y el mío funciona. Pero este no lo es.