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

我正在尝试在我的 HTML 中显示已登录用户的用户名。我使用 Firebase 进行身份验证，并使用 Angular 8 进行主要开发。Firebase 集成完全受支持，并且不会引起任何问题。但是，当我尝试显示从 Firebase 获取的用户名数据时，我无法做到。

我做了很多谷歌搜索，包括阅读 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! 的内容

编辑：

我看了很多答案，大多数都是正确的实现方法，但我不明白为什么这没起作用。我仍在寻找完整的 Angular 实现的答案，但目前我使用了 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);
      }
    });
  }

}

答案＃1

既然我假设你将来会添加的不仅仅是用户名，我建议你调整你的代码以使用一个服务。它的工作方式相同，但在处理更大数据时更灵活。

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>

答案＃2

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