Question

我正在尝试在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>

更新的TypeScript：

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);
      }
    });
  }

}

Answer 1

在这些情况下，我喜欢使用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>

Answer 2

使用* ngIf

仅当数据准备就绪时，才会填充DOM。

 quantile(dat, prbs=seq(0,1,by=0.25), type=1)
 # 0%  25%  50%  75% 100% 
 #  1    3    6    9   11

Answer 3

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

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>

Answer 4

我怀疑问题是由于此变量的上下文在功能上不同所致。

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

  constructor() {}

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

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

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

无法在HTML中显示变量数据-Angular 8

4 个答案: