无法读取未定义的观察值Ionic的属性方向

Question

我正在开发一个Ionic 5/angular应用程序，我在注销功能上遇到了问题。

登出后，登入页面会显示，但不能输入使用者编号和密码(不接受任何键盘输入)

唯一的线索是跟随错误，有时会显示。

​

​

组件中的注销方法为：

     login(form){

    this.authService.login(form.value);
    
    this.authService.currentUser.subscribe(
      (data)=>{
        console.log(data);
        if(data) {this.router.navigateByUrl('home')}
          else {
            
            this.router.navigateByUrl('/login')
          }
      },
      (error) => {throw Error(error)}
    );
    
  }

我正在使用behaviorSubject来跟踪服务中登录的用户：

 private _currentUser: BehaviorSubject<UserLogueado> = new BehaviorSubject(null);

  currentUser = this._currentUser.asObservable();

  constructor(private hashingService: HashingService, private router: Router, private http: HttpClient) { }

  encriptarContrasenia(contrasenia: string): string {
    
    return this.hashingService.hashearString(contrasenia);
  }

  private setSession(authResult) {
    //const expiresAt = moment().add(authResult.expiresIn,'second');

    localStorage.setItem('auth_token', authResult.token);
    localStorage.setItem('auth_Refresh_token', authResult.refreshToken);
}  

  login(usuarioFromForm) {

    var usuario;
    var dataToken;

    this.http.post<any>(environment.UrlBaseApi +'Authenticate/Login', { username: usuarioFromForm.email, 
      password: this.encriptarContrasenia(usuarioFromForm.password) }, 
      {headers: new HttpHeaders({ 'Content-Type': 'application/json' })})
      .subscribe(
        data => {
          console.log(data)
          dataToken = data
          this.setSession(data)
          this.obtenerDetalleUsuario(usuarioFromForm.email).subscribe(
            data=>{
              usuario = data;
              //this._currentUser = new BehaviorSubject(usuario)
              /* this._currentUser.isStopped = false;
              this._currentUser.closed = false; */
              //this._currentUser.lift()
              this._currentUser.next(usuario);

            }, 
            (error) => {
              throw error
            }
          )
        },
        (error) => {
          throw error
        }
      )
  }

  getUserSubject() {
    return this._currentUser.asObservable();
  }

  isLoggedIn() {
    return !!this._currentUser.value;
  }

  obtenerDetalleUsuario(usuario: string): Observable<any>{

    return this.http.get<any>(environment.UrlBaseApi + `Authenticate/user/${usuario}`);
 
  }

  logout() {

      localStorage.removeItem('auth_token')
      localStorage.removeItem('auth_Refresh_token')
      
      this.router.navigate(['/login'])

      this._currentUser.next(null);
  }

Current user用于在appComponent中显示manus和headers。

<应用程序菜单*ngIf="currentUser">

有什么建议吗？

编辑：

在尝试了不同的方法之后，我注意到如果我在注销方法中注释以下行：

this._currentUser.next(null);

应用程序导航到登录页面并输入工作。但由于菜单和标题取决于主题，因此会显示它们。

对如何确定主题有什么建议吗？

Answer 1

由于currentUser是一个可观察对象，因此应该将其与AsyncPipe一起使用，以便订阅它并接收其内部值，如下所示：

<app-menu *ngIf="currentUser | async">

Answer 2

当组件被销毁时，您是否会取消订阅this.authService.currentUser？

组件代码：

destroyed$ = new Subject();

this.authService.currentUser.pipe(
   takeUntil(this.destroyed$)
).subscribe(...)

ngOnDestroy() {
   this.destroyed$.next();
   this.destroyed$.complete();
}