我试图显示登录的用户信息(用户名或电子邮件,并不重要),但当我显示为<a> Hello {{ user.displayName }} </a>
时,它显示“Hello”。在我尝试显示完整对象后,我得到了[Object object]。在console.log(this.currentUser$)
之后,我得到了一个Object的原型,操作符长度为1,name =“"。
代码如下:
search.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { authState, Auth } from '@angular/fire/auth';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css'],
})
export class SearchComponent implements OnInit {
constructor(private router: Router, private authService: AuthService, private auth: Auth) {}
currentUser$ = authState(this.auth);
ngOnInit(): void {
console.log(this.currentUser$);
}
doSearch(value: string) {
console.log(`value=${value}`);
this.router.navigateByUrl(`/search/${value}`);
}
signOut(){
this.authService.signOut();
}
}
search.component.html
<a *ngIf="currentUser$ | async as user; else loginButton" >
Hello {{ user }} <-- to display email is {{ user.displayName }}
</a>
<ng-template #loginButton>
<button class="au-btn-security" routerLink="/login">Log in</button>
<button class="au-btn-sec" routerLink="/register">Register</button>
</ng-template>
<button class="au-btn-sec" (click)="signOut()">Sign Out</button>
1条答案
按热度按时间nwwlzxa71#
authState应该在登录和退出事件上发出值,使用user(this.auth)获取当前用户信息