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中我设置了uid，用户名和photoURL 但当我试图用HTML打印出来时，它没有显示出来，它为我的“用户名”表示null，为我的“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);
    })
  }

}

这是我的家。：

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>

更新：这是我的firebase控制台的用户，它说，我已经登录，我检查上次登录日期，是的我在该日期登录

这是我的“聊天”表的火力库数据库：

Answer 1

您需要在home.html中使用安全操作符，因为第一次调用firebase时无需显示任何内容。您的用户信息仍然传入firebase，而您已经订阅并且没有收到任何内容，因此稍后会发布。尝试：

else

您可以在此处详细了解安全操作符：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

编辑：

你找错了图片和照片的位置，将你的代码更改为下一行，这将有所帮助。

<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>

如何使用firebase3中的angularfire2在google auth中正确获取个人资料照片和用户名

1 个答案: