type switchmap switch property not exist does javascript angular

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



switchmap does not exist on type observable (6)

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


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


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.


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


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)


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


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