Невозможно отобразить переменные данные в HTML - Angular 8

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!

EDIT:

Я посмотрел много ответов, и большинство из них - правильные реализации, однако я не уверен, почему это не работает. Я все еще ищу ответы с полной угловой реализацией, но на данный момент я использовал 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

Я подозреваю, что проблема вызвана тем, что контекст этой переменной отличается в функции.

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

  constructor() {}

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

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

Я думаю, что приведенный выше код должен решить проблему

Answer 2

с использованием * ngIf

DOM будет заполняться только тогда, когда данные будут готовы.

<div *ngIf='username'>
<h1>{{username}}</h1>
</div>

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

Мне нравится использовать метод 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>