为什么我在 Angular 项目中尝试使用 map() 函数时会收到此错误消息？找不到名称 'map'

Question

我正在做一个 Angular 项目，我在这个 class 中发现了以下问题：

import { Component, OnInit } from '@angular/core';
import {SidebarModule} from 'primeng/sidebar';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  display;

  isLoggedIn$: Observable<boolean>;
  isLoggedOut$:Observable<boolean>;
  pictureUrl$: Observable<string>;


  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit(): void {
    this.afAuth.authState.subscribe(user => console.log(user));

    this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));

    this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));

    this.pictureUrl$ =
      this.afAuth.authState.pipe(map(user => user ? user.photoURL: null));
  }


  logout() {
    this.afAuth.auth.signOut();
  }

}

问题出现在map()调用这3行：

this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));

this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));

this.pictureUrl$ =
  this.afAuth.authState.pipe(map(user => user ? user.photoURL: null));

IDE 给我这个错误信息：

Cannot find name 'map'. Did you mean 'Map'?ts(2552)
lib.es2015.collection.d.ts(36, 13): 'Map' is declared here.

正在尝试编译我收到此错误消息：

ERROR in src/app/header/header.component.ts:25:51 - error TS2552: Cannot find name 'map'. Did you mean 'Map'?

25     this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
                                                     ~~~

  node_modules/typescript/lib/lib.es2015.collection.d.ts:36:13
    36 declare var Map: MapConstructor;
                   ~~~
    'Map' is declared here.
src/app/header/header.component.ts:27:47 - error TS2552: Cannot find name 'map'. Did you mean 'Map'?

27     this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
                                                 ~~~

  node_modules/typescript/lib/lib.es2015.collection.d.ts:36:13
    36 declare var Map: MapConstructor;
                   ~~~
    'Map' is declared here.
src/app/header/header.component.ts:30:34 - error TS2552: Cannot find name 'map'. Did you mean 'Map'?

30       this.afAuth.authState.pipe(map(user => user ? user.photoURL: null));
                                    ~~~

  node_modules/typescript/lib/lib.es2015.collection.d.ts:36:13
    36 declare var Map: MapConstructor;
                   ~~~
    'Map' is declared here.

为什么？怎么了？我错过了什么？我该如何尝试修复此代码？

Answer 1

您需要导入 RxJS map 运算符：import {map} from 'rxjs/operators';

为什么我在 Angular 项目中尝试使用 map() 函数时会收到此错误消息？找不到名称 'map'

Why am I obtaining this error message trying to use map() function in an Angular project? Cannot find name 'map'

rxjs

angular

angular9