Как получить профиль pic и имя пользователя правильно в google auth с помощью angularfire2 от firebase3

Question

вот чего я пытаюсь достичь, я пытаюсь распечатать изображение профиля и имя пользователя, когда я уже вошел в систему, используя проверку подлинности firebase в ионном приложении, я хочу чтобы получить изображение профиля и мое имя пользователя, как мне это сделать?

Вот мой app.component.ts:

export class MyApp { 
    rootPage:any = LoginPage; 

    constructor(platform: Platform, private auth: FirebaseAuth) { 
    this.auth.subscribe((data) =>{ 
     if(data){ 
     window.localStorage.setItem('uid', data.auth.uid); 
     window.localStorage.setItem('displayName', data.auth.displayName); 
     window.localStorage.setItem('photoUrl', data.auth.photoURL); 
     this.rootPage = HomePage; 
     } 
    }) 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 
} 

там в моем app.component.ts я установить идентификатор пользователя, имя пользователя и photoURL , но когда я пытаюсь напечатать его в HTML, его не появляется, он сказал нуль для моего «имя пользователя» и пустой URL для моего «photoURL»

вот мой login.ts код:

export class LoginPage { 

    constructor(public nav: NavController, private auth: FirebaseAuth) {} 

    ionViewDidLoad() { 
    console.log('Hello LoginPage Page'); 
    } 

    LoginGoogle(){ 
    this.auth.login({ 
     provider: AuthProviders.Google, 
     method: AuthMethods.Redirect 
    }).then((data)=>{ 
     this.nav.setRoot(HomePage); 
    }) 
    } 

} 

и вот мой home.ts:

export class HomePage { 

    firelist: FirebaseListObservable<any>; 
    chat:any; 

    constructor(public navCtrl: NavController, private af:AngularFire, private auth: FirebaseAuth) { 
     this.firelist = this.af.database.list('/chat', 
     { 
      query:{ 
       orderByChild: 'negativtimestamp' 
      } 
     }); 
    } 

    chatSend(va,vi){ 
     this.af.database.list('/chat').push({ 
      uid: window.localStorage.getItem('uid'), 
      username : window.localStorage.getItem('displayName'), 
      img : window.localStorage.getItem('photoURL'), 
      chat_text: va.chatText, 
      timestamp: Date.now(), 
      negativtimestamp: -Date.now() 
     }) 
     this.chat = ''; 
     console.log(window.localStorage.getItem('displayName')); 
    } 

    logout(){ 
     window.localStorage.removeItem('uid'); 
     window.localStorage.removeItem('displayName'); 
     window.localStorage.removeItem('photoURL'); 
     this.auth.logout(); 
     this.navCtrl.setRoot(LoginPage); 
    } 

} 

вот мой home.html

<ion-content> 
    <ion-list> 
    <ion-item *ngFor="let item of firelist | async"> 
     <ion-avatar> 
      <img src="{{item.img}}"/> 
     </ion-avatar> 
     <h2 class="chat-username">{{item.username}}</h2> 
     <p class="chat-text">{{item.chat_text}}</p> 
     <h6 class="chat-time">{{item.timestamp}}</h6> 
    </ion-item> 
    </ion-list> 
</ion-content> 

<ion-footer> 
    <form #f="ngForm"> 
     <ion-grid> 
      <ion-row> 
       <ion-col width-80> 
        <ion-input [(ngModel)]="chat" name="chatText" placeholder="pesan.."></ion-input> 

       </ion-col> 
       <ion-col> 
        <button (click)="chatSend(f.value, f.valid)" full [disabled]="f.valid === false">Send</button> 
       </ion-col> 
       <ion-col> 
        <button (click)="logout()">Logout</button> 
       </ion-col> 
      </ion-row> 
     </ion-grid> 
    </form> 
</ion-footer> 

UPDATE: вот моя firebase консоль для пользователя, он сказал, я уже вошли в систему, я проверить на дату последнего входа, да я вошел в эту дату в

Вот моя firebase база данных для «поболтать» таблицы:

Answer 1

Вам необходимо использовать безопасный оператор в вашем home.html, потому что в первый раз, когда вы звоните в firebase, ничего не видно. Ваша информация о пользователе все еще поступает в firebase, а вы уже подписались и ничего не получили, так что это произойдет немного позже. Попробуйте:

<ion-avatar> 
    <img src="{{item?.img}}"/> 
</ion-avatar> 
<h2 class="chat-username">{{item?.username}}</h2> 
<p class="chat-text">{{item?.chat_text}}</p> 
<h6 class="chat-time">{{item?.timestamp}}</h6> 

Вы можете прочитать больше о безопасном оператора здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

Edit:

Вы смотрели на неправильное место для картины и фотографии, изменить код следующей строки, и это поможет ,

window.localStorage.setItem('displayName', data.google.displayName); 
window.localStorage.setItem('photoUrl', data.google.photoURL);