1

我正在尝试在我的 HTML 中显示登录用户的用户名。我使用 firebase 进行身份验证，使用 Angular 8 进行主要开发。完全支持 Firebase 集成，不会导致任何问题。但是当我尝试显示从 firebase 用户名获取的数据时，我不能这样做。

我做了很多 Google 搜索，包括阅读 Angular CLI 文档，还查看了以前在 stackoverflow 上提出的各种问题，但不知何故，我似乎无法理解。这是我的代码：

export class PortalComponent implements OnInit {

  public username: string = null;

  constructor() {

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.username = user.displayName;
      }
    });

  }
}

这是我的 HTML 代码：

<h2>Welcome {{username}}!</h2>

我该如何解决？我的预期答案应该是Welcome Brian!

编辑：

我看了很多答案，其中大多数都是正确的实现，但是我不确定为什么这不起作用。我仍在寻找具有完整角度实现的答案，但目前我使用 jQuery 并且它可以工作。我做了什么：

更新的 HTML：

<h2>Welcome <span id="username"></span>!</h2>

更新的打字稿：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

// Code removed for brevity

export class PortalComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        $('#username').html(user.displayName);
      }
    });
  }

}
4

4 回答 4

0

对于这些情况，我喜欢使用 get 方法。尝试这样的事情：

export class PortalComponent implements OnInit {

  public username: string = null;

  constructor() {

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.username = user.displayName;
      }
    });
  }
  get GetUserName(): string {
     return this.username;
  }
}

<h2>Welcome {{GetUserName}}!</h2>
于 2019-07-11T19:52:56.710 回答
0

使用 *ngIf

仅当数据准备好时才会填充 DOM。

<div *ngIf='username'>
<h1>{{username}}</h1>
</div>
于 2019-07-11T19:55:18.863 回答
0

由于我假设您将来会添加更多的用户名，因此我建议您调整代码以使用服务。我的工作方式相同，但在处理更大的数据时更灵活。

user.service.ts：

 export class UserService {
   constructor() {}
   username: string;

   getUsername() {
     return this.username;
   }
   setUsername(user) {
     this.username = user;
   }
}

您的组件已更新：

 export class PortalComponent implements OnInit {

   username: string; //Setting null is unnecessary 
   userService: UserService;
   constructor(private _userService: UserService) {
     this.userService= _userService;
     firebase.auth().onAuthStateChanged((user) => {
       if (user) {
         this.userService.setUsername(user);
       }
     });
   }
   get GetUsername(): string
   {
     return this.userService.getUsername();
   }
}

组件html：

 <div *ngIf="this.GetUsername()">
   <h2>Welcome{{ this.GetUsername() }}!</h2>
 </div>
于 2019-07-11T20:09:01.310 回答
0

我怀疑这个问题是由于这个变量的上下文在函数中不同而引起的。

export class PortalComponent implements OnInit {
  public username: string = null;

  constructor() {}

  ngOnInit() {
    firebase.auth().onAuthStateChanged(setUsername);
  }

  private setUserName(user) {
      if (user) {
        this.username = user.displayName;
      }
  }
}

我认为上面的代码应该可以解决问题

于 2019-07-11T22:41:58.907 回答