angular - 错误:“可观察”类型上不存在属性“地图”'
问题描述
在我的 Angular-Firebase 在线购物项目中,我曾经AuthGuard
检查用户是否登录以访问./check-out
和其他链接,如下面的代码所示。由于未在下面的代码中map
导入,因此出现错误。Observable.User
使用最新版本的所有内容。
auth.service.ts
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<firebase.User>;
constructor(private afAuth: AngularFireAuth) {
this.user$=afAuth.authState;
}
login(){
this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
}
logout(){
this.afAuth.auth.signOut()
}
}
登录组件.ts
import { AuthService } from './../auth.service'
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent{
constructor(private auth: AuthService) { }
ngOnInit() {
}
login(){
this.auth.login();
}
}
bs-navbar.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'bs-navbar',
templateUrl: './bs-navbar.component.html',
styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent{
constructor(public auth: AuthService) {
}
logout(){
this.auth.logout();
}
}
bs-navbar.component.html
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" routerLink="/">O</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/shopping-cart">Shopping cart</a>
</li>
<ng-template #anonymousUser>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ng-template>
<li ngbDropdown *ngIf="auth.user$ | async as user; else anonymousUser" class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{user.displayName}}
</a>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" routerLink="/my/orders">My Orders</a>
<a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
<a class="dropdown-item" routerLink="/admin/products">Manage Prodcuts</a>
<a class="dropdown-item" (click)="logout()">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
auth.guard.service.ts
import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate{
constructor(private auth:AuthService, private router: Router) {
}
canActivate(): boolean{
return this.auth.user$.map(user=>{
if(user) return true;
this.router.navigate(['./login']);
return false;
});
}
}
在auth.guard.service.ts中出现错误return this.auth.user$.map(user=>
。
解决方案
如果您使用的是最新版本的 RxJS,可能是因为map
必须像这样对操作符进行管道传输:
return this.auth.user$.pipe(map(user => ...));
你可以在这里看到一个例子:https ://www.learnrxjs.io/operators/transformation/map.html
推荐阅读
- arrays - 返回具有最大元素值的数组的索引
- bash - 使用带有 twurl 的 bash 脚本将图像上传到 Twitter 时出现问题。不断收到“代码:44”“media_ids 参数无效”
- php - 在php中获取数组项的名称
- python - 如何在 Pygame 中克隆 Sprite?
- android - 无法在 Kotlin 多平台项目中调试 iOS 应用程序
- keycloak - 注册后如何在keycloak用户模型中存储外部数据
- drake - 如何在 Drake 中更改 RevoluteJoint 的阻尼系数
- apache-spark - 在 spark scala 中参数化的 lit() 函数
- c++ - 将模板函数指针转换为通用类型
- python-3.x - 使用 cross_val_score() 时输入包含 NaN 错误