Angular ngIf firebase身份验证指令使DOM无响应
我正在使用Angular的Angular ngIf firebase身份验证指令使DOM无响应,angular,firebase-authentication,angular-ng-if,Angular,Firebase Authentication,Angular Ng If,我正在使用Angular的*ngIf指令检查用户当前是否登录。根据用户的身份验证状态(我使用的是Firebase身份验证),应该显示登录按钮或用户菜单。代码如下: .html <div class="right-side"> <!-- Header Widget --> <div class="header-widget"> <!-- User Menu --> <div class="user-menu"
*ngIf
指令检查用户当前是否登录。根据用户的身份验证状态(我使用的是Firebase身份验证),应该显示登录按钮或用户菜单。代码如下:
.html
<div class="right-side">
<!-- Header Widget -->
<div class="header-widget">
<!-- User Menu -->
<div class="user-menu" *ngIf="afAuth.authState | async as user; else showLogin">
<div class="user-name"><span><img src="assets/images/agent-03.jpg" alt=""></span>Hi, {{ ... }}!</div>
<ul>
<li><a routerLink="my/profile"><i class="sl sl-icon-user"></i> My Profile</a></li>
<li><a routerLink="my/bookmarks"><i class="sl sl-icon-star"></i> Bookmarks</a></li>
<li><a routerLink="my/properties"><i class="sl sl-icon-docs"></i> My Properties</a></li>
<li (click)="logOut()"><a routerLink="/"><i class="sl sl-icon-power"></i> Log Out</a></li>
</ul>
</div>
<ng-template #showLogin>
<a routerLink="/login-register" class="sign-in"><i class="fa fa-user"></i> Log In / Register</a>
</ng-template>
<a routerLink="/submit-property" class="button border">Submit Property</a>
</div>
<!-- Header Widget / End -->
</div>
单击时,用户菜单应弹出并显示链接列表。但是,它在单击时没有响应。。以下是菜单ul的.css
代码:
.css
import { AngularFireAuth } from 'angularfire2/auth';
// ...
@Component({
// ...
})
export class AppComponent {
constructor(public afAuth: AngularFireAuth) {
}
.user-menu ul {
float: left;
text-align: left;
position: absolute;
top: 45px;
right: 0;
list-style: none;
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
border-radius: 4px;
display: inline-block;
width: 190px;
font-size: 15px;
transform: translate3d(0,15px,0);
padding: 16px 8px;
box-sizing: border-box;
transition: 0.25s;
visibility: hidden;
opacity: 0;
z-index: 110;
}
如果我将*ngIf
指令中的代码替换为so
,则DOM响应:
但当我监视用户的身份验证状态时,*ngIf=“afAuth.authState |作为用户异步;否则显示登录”
,它将保持无响应
如何解决这个问题?将这一行添加到类中
user$: Observable<firebase.user>;
constructor(private afAuth: AngularFireAuth){
this.user$ = afAuth.authState
}
user$:可观察;
构造函数(专用afAuth:AngularFireAuth){
this.user$=afAuth.authState
}
在HTML中编写
<div *ngIf="user$ | async as user; else showLogin">
尝试将构造函数更改为:user:Observable;构造函数(public-afAuth:AngularFireAuth){this.user=afAuth.authState;}然后将html保持为,*ngIf=“user | async;else showLogin”代码看起来正常。您确定firebase设置没有问题吗?