javascript - property - P: Angular2: ''switchMap'' no existe en el tipo ''Observable<Params>''

switchmap does not exist on type observable

Question

Estoy aprendiendo Angular2, y siguiendo el ejemplo de "Tour of Heroes", cuando configuro una página de detalles para enrutar, recibí este error de compilación del paquete web:

ERROR in ./ts/router/route-hero-detail.component.ts
(25,23): error TS2339: Property ''switchMap'' does not exist on type ''Observable<Params>''.

Estoy usando el paquete web para gestionar el paquete,

A continuación se muestra el código JS:

import ''rxjs/add/operator/switchMap'';
import { Component, OnInit } from ''@angular/core'';
import { ActivatedRoute, Params } from ''@angular/router'';
import { Location } from ''@angular/common'';
import { Hero } from ''../hero'';
import { HeroService } from ''../hero.service'';
@Component({
moduleId: module.id,
selector: ''my-hero-detail'',
templateUrl: ''./hero-detail.component.html'',
styleUrls: [ ''./hero-detail.component.css'' ]
})
export class RouteHeroDetailComponent implements OnInit {
hero: Hero;
constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private location: Location
) {}
ngOnInit(): void {
this.route.params.switchMap((params: Params) => this.heroService.getHero(+params[''id'']))
.subscribe((hero: Hero) => this.hero = hero);
}
goBack(): void {
this.location.back();
}
}

paquete.json:

{
"name": "environment",
"version": "1.0.0",
"description": "I will show you how to set up angular2 development environment",
"keywords": [
"angular2",
"environment"
],
"scripts": {
"start": "webpack-dev-server --hot--host 0.0.0.0"
},
"author": "Howard.Zuo",
"license": "MIT",
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "^2.4.5",
"@angular/forms": "^2.4.5",
"@angular/platform-browser": "^2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/router": "^3.4.8",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
"@types/node": "^7.0.5",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"rxjs": "5.0.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}

webpack.config.js:

const path = require(''path'');
module.exports = {
entry: {
index: "./ts/index.ts"
},
output: {
path: path.resolve(__dirname, ''dist''),
filename: ''bundle.js'',
publicPath: ''dist/''
},
module: {
exprContextCritical: false,
rules: [
{
test: //.ts$/,
use: [''ts-loader'']
}
]
},
resolve: {
extensions: [
''.js'',
''.ts''
]
}
};

HeroService.ts:

import {Injectable} from ''@angular/core'';
import {Hero} from ''./hero'';
import {HEROES} from ''./mock-heroes'';
import { Observable } from ''rxjs/Observable'';
@Injectable()
export class HeroService {
getHeroes() : Promise<Hero[]>{
return Promise.resolve(HEROES);
}
getHero(id: number): Promise<Hero> {
return this.getHeroes()
.then(heroes => heroes.find(hero => hero.id === id));
}
}

Answer 1

Este problema se ha solucionado, verifique a continuación:

 this.route.params.forEach((params: Params) => {
if (params[''id''] !== undefined) {
let id = +params[''id''];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
}
});

Answer 2

Estoy desarrollando en Visual Studio y siguiendo el mismo tutorial de Angular2 en la documentación de Angular aquí: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html , y obtengo lo mismo errores que aparecen para switchMap aunque estoy usando la importación: import ''rxjs/add/operator/switchMap''; .

Me di cuenta de que mi aplicación no se estaba cargando porque los archivos .html estaban en la carpeta src/app , aunque el tutorial de Angular le dice que los deje en ese directorio. Nadie me dijo que hiciera esto, solo por casualidad, moví tanto hero-detail.component.html como dashboard.component.html a la carpeta /src y luego la aplicación comenzó a mostrar los resultados correctos en el navegador.

Answer 3

La actualización de Angular 6 que viene con rxjs 6.xx you

import { switchMap } from ''rxjs/operators'';

Luego simplemente envuelva el conmutador de mapas con un operador de tuberías.

this.route.params.pipe(switchMap((params: Params) => {
this.heroService.getHero(+params[''id''])
})).subscribe((hero: Hero) => this.hero = hero);

Answer 4

Necesitas importar el operador switchMap :

import ''rxjs/add/operator/switchMap'';

actualización para rxjs> = 5.5.0:

para [email protected] o superior, se recomienda utilizar el operador de tubería en lugar del aumento:

import { switchMap } from ''rxjs/operators'';
//...
this.route.params.pipe(switchMap((params: Params) => /*... */))
.subscribe(/*... */);
//...

(Esto evita los efectos secundarios y permite una mejor optimización del tamaño del paquete)

Answer 5

import { ActivatedRoute, Params } from ''@angular/router'';
import { switchMap } from ''rxjs/operators'';
...
ngOnInit(): void {
this.route.params.pipe(
switchMap(
(params: Params) =>
this.heroService.getHero(+params[''id''])))
.subscribe(hero => this.hero = hero);
}

Answer 6

import { Observable, of } from ''rxjs'';
import { switchMap } from ''rxjs/operators'';
this.user = this.afAuth.authState.pipe(switchMap(user => {
if (user) {
return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
} else {
return of(null)
}
}));
}