typescript - Angular 6 - rxjs-ominaisuutta 'map' ei ole tyypissä 'observable'

Saan tämän virheen, kun päivitin Angular 6:een. Näen dokumentaation käyttääkseni .pipe(), mutta en ymmärrä, miten käyttää pipea, kun on useita .map()-kutsuja kuten alla. Tarvitsen apuasi...

   import {Injectable} from '@angular/core';
    import {Http, Headers} from '@angular/http';
    import 'rxjs/add/operator/map';
    import {TOKEN_AUTH_PASSWORD, TOKEN_AUTH_USERNAME} from '../services/auth.constant';

    @Injectable()

    export class AuthenticationService {

      static AUTH_TOKEN = '/oauth/token';
      constructor(private http: Http) {
      }
      login(username: string, password: string) {

        const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

        const headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Authorization', 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD));
        return this.http.post(AuthenticationService.AUTH_TOKEN, body, {headers})
          //.map(res => res.json())
          .pipe(map((res: any) => {
            if (res.access_token) {
              return res.access_token;
            }
            return null;
          }));
      }
    }

Ymmärrän, että .pipea käytetään, kun on yksi .map käytetty kuten alla, mutta en ymmärrä, miten käyttää pipe() kun useita .mapeja käytetään.

.pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });

Vastaus #1

Käyttääksesi putkea useiden operaattoreiden kanssa, sinun tulisi käyttää pilkkua:

return this.http.post(AuthenticationService.AUTH_TOKEN, body, {headers})
.pipe(
  map(res => res.json()),
  map((res: any) => {
    if (res.access_token) {
      return res.access_token;
    }
    return null;
  })
);

mutta sinun tapauksessasi ei tarvitse käyttää map(res => res.json()).

ja

Aiemmissa versioissa tuonti oli import 'rxjs/add/operators/map'.

Angular 6:ssa sen pitäisi olla: import { map } from 'rxjs/operators';

Muuten, jos odotat peruutusvaikutusta, sinun pitäisi käyttää switchMap sen sijaan, että käyttäisit map. Lue lisää