Question

当我升级到Angular 6时遇到此错误。我看到了使用.pipe（）的文档，但是当存在多个.map（）时，我没有得到如何使用管道的信息，如下所示。需要您的帮助...

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

我知道在使用一个.map时，像下面这样使用.pipe，但是当使用多个.map时，我没有得到如何使用pipe（）的信息。

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

Answer 1

要在多个运算符中使用管道，应使用逗号：

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

但您的情况下无需使用map(res => res.json())。

和

在以前的版本中，导入为import 'rxjs/add/operators/map'。

在Angular 6中，它应该是：import { map } from 'rxjs/operators';

顺便说一句，如果您期望得到取消效果，则应该使用 switchMap 而不是地图。 Read more

Angular 6-类型'observable'不存在rxjs属性'map'

1 个答案: