Daten nicht in Sicht

Question

Als Student gezeigt bekommen, bin ich zur Zeit stecken mit dem Versuch, die folgenden zu erstellen:

Ich habe in meinem sidemenu (bezogen auf die sidemenu Vorlage) ein profilepicture & displayname, die ich tauschen wollen mit Daten aus meiner Firebase-Datenbank.

Ich habe den folgenden Code:

1. App.html

   <img id="profile-image" src="assets/profile/{{ photoURL }}" alt="{{ displayName }}"/> 
   <div id="profile-name" text-center class="width-full">{{ displayName }}</div> 
   

2. App.component.ts

   var displayName; 
   var photoURL; 
   
   export class MyApp 
   { 
   
   constructor() 
   {  
       this.setUserData(); 
   

   }

   setUserData()
   {
   this.uid = firebase.auth(). CurrentUser.uid;

   console.log("UID: "+ this.uid); 
   
   let ref = firebase.database().ref('/userProfile').child(this.uid); 
   
   ref.once('value', function(snapshot) 
   { 
       //CALLBACK 
       var key = snapshot.key; 
       var em = snapshot.child("/email").val(); 
       var nm = snapshot.child("/name").val(); 
       var dpn = snapshot.child("/displayName").val(); 
       var pURL = snapshot.child("/photoURL").val(); 
   
       //LOG 
       console.log("KEY: "+key); 
       console.log("NAME: "+nm); 
       console.log("DISPLAYNAME: "+dpn); 
       console.log("EMAIL: "+em); 
       console.log("PHOTOURL: "+pURL); 
   
       displayName = dpn; 
       photoURL = pURL; 
   
   }, function(error) 
   { 
       // The callback failed. 
       console.error(error); 
   }); 
   

In meiner Konsole ich, dass der UID sehen wird immer geladen, die korrekten Daten abgerufen werden immer aber ich kann das Ergebnis auf meiner Ansicht nach nicht scheinen, zu? Es bleibt einfach leer.

Kann jemand erklären, was ich vermisse oder was ich tun soll?

Vielen Dank im Voraus!

Answer 1

Sie sollten die Variablen innerhalb der Klasse, erklären

export class MyApp{ 
displayName :string; 
photoURL :string;