Question

我是新的角度，我很困惑如何显示从auth.ts传递的数据。它显示在我的控制台上但不在视图中，我如何将值传递给我的视图。任何提示或者你能指出我做错了什么？感谢

的login.html

<ion-card *ngIf="userProfile">
<img [src]="userProfile.photoURL"/>
<ion-card-content>
 <ion-card-title>
  {{ userProfile.displayName }}
 </ion-card-title>
 <p>
   The UID for this new user is {{userProfile.uid}} and the email is 
  {{userProfile.email}}
   </p>
  </ion-card-content>
 </ion-card>

login.ts

  userProfile: any;

 constructor(public navCtrl: NavController, public navParams: NavParams, public _authProvider: AuthProvider) {
}

  _fbLogin() {
this._authProvider._fbLogin();
}

  _signOut() {
this._authProvider._signOut();
}

提供者：

auth.ts

     userProfile: any = null;
      constructor(public _afAuth: AngularFireAuth, public _fb: Facebook) {
        console.log('Hello AuthProvider Provider');
      }

      _fbLogin(){
        this._fb.login(['email']).then( (response) => {
          const facebookCredential = firebase.auth.FacebookAuthProvider
              .credential(response.authResponse.accessToken);

          firebase.auth().signInWithCredential(facebookCredential)
          .then((success) => {
              console.log("Firebase success: " + JSON.stringify(success));
              this.userProfile = success;
          })
          .catch((error) => {
              console.log("Firebase failure: " + JSON.stringify(error));
          });

      }).catch((error) => { console.log(error) });
      }

      _signOut(){
        this._afAuth.auth.signOut();
      }

app.component.ts

  _afAuth.authState.subscribe((user: firebase.User) => {
    if (!user) {
  this.userProfile = null;
  return;
   }
   this.userProfile = user.displayName;
   });

Answer 1

您设置的this.userProfile = user.displayName;表示userProfile仅包含您的显示名称字符串，然后{{ userProfile.displayName }}无效。

尝试设置this.userProfile = user;

和{{ userProfile.displayName }}将打印正确的数据。

angular - 来自auth的数据不会在视图中显示

1 个答案: