authState(this.auth);返回空对象

Question

我正在尝试显示登录用户信息（用户名或电子邮件，无关紧要），但是当我显示为

<a> Hello {{ user.displayName }} </a>

时，它显示“你好”。在我尝试显示完整对象后，我得到了 [Object object]。在

console.log(this.currentUser$)

之后，我得到了一个 Object 的原型，其运算符的长度为 1，名称 =“”。

代码如下：

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>

Answer 1

authState 应该在登录和注销事件上发出值，使用 user(this.auth) 获取当前用户信息