Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

310
Visualizações
switchMap is not a function

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.

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.

about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

You also need to add the switchMap operator:

import 'rxjs/add/operator/switchMap';
about 4 years ago · Santiago Trujillo Relatório

0

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

A Subject is not an observable, but your function is asking for one, so modify it like this

ngOnInit() {
    this.employeeSearchService.searchEmployees(this.searchQuery.asObservable())...
}
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda