javascript - 如果我有来自 Cloud Firestore 的其他自定义数据，如何获取用户数据？

Question

因此，我存储了用户的电子邮件、姓名、年龄、电话号码和 uid。

user.model.ts：

export interface User {
    uid: string,
    name: string,
    email: string,
    phoneNumber: string,
    age: string
}

auth.service.ts：

  userData: any;
  
  constructor(
    private http: HttpClient,
    private alertCtrl: AlertController,
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth,
    public router: Router
    ) { 
      /* Saving user data in localstorage when 
      logged in and setting up null when logged out */
      this.afAuth.authState.subscribe( user => {
        if(user) {
          this.userData = user;
          localStorage.setItem('user', JSON.stringify(this.userData));
          JSON.parse(localStorage.getItem('user'));
        }else{
          localStorage.setItem('user', null);
          JSON.parse(localStorage.getItem('user'));
        }
      })
    }
    
    // Returns true when user is logged in (and email is verified)
    get isLoggedIn(): boolean {
      const user = JSON.parse(localStorage.getItem('user'));
      return (user !== null) ? true : false;
    }
    
    setUserData(user, name?, phoneNumber?, age?) {
      const userRef : AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
      const userData: User = {
        uid: user.uid,
        name,
        email: user.email,
        phoneNumber,
        age,
      }
      return userRef.set(userData, {
        merge: true
      })
    }
    
     // Sign up with email/password
    signup(name,  email, phoneNumber, age, password) {
      return this.afAuth.createUserWithEmailAndPassword(email, password)
        .then( (result) => {
          this.setUserData(result.user, name, phoneNumber, age);
          this.router.navigate(['/home']);
        }).catch((error) => {
          const code = error.code;
          let message = 'Could not sign up, please try again.';
          
          if(code === 'auth/email-already-in-use') {
            message = 'The email address exists already.';
          }else if(code === 'auth/invalid-password') {
            message = 'Password should be at least 6 characters';
          }else if(code === 'auth/invalid-email') {
            message = 'Invalid email.';
          }
          this.showAlert(message);
         })
    }
    
    // Sign in with email/password
    signIn(email, password) {
      return this.afAuth.signInWithEmailAndPassword(email, password)
        .then( (result) => {
          this.setUserData(result.user);
          this.router.navigate(['/home']);
        }).catch( (error) => {
          const code = error.code;
          let message = 'Could not sign up, please try again.';
          
          if(code === 'auth/invalid-email') {
            message = 'Invalid email.';
          }else if(code === 'auth/wrong-password') {
            message = 'Password is wrong.';
          }else if(code === 'auth/user-not-found') {
            message = 'User not found.';
          }
          this.showAlert(message);
        });
    }

我想显示用户数据的 home.page.html：

<ion-content>
     <!-- Show user data when logged in -->
     <div class="row" *ngIf="authService.userData as user">
      <div class="col-md-12">          
          <div class="media-body">
            <h1>Hello: <strong>{{user.name}}</strong></h1>
            <p>User ID: <strong>{{user.uid}}</strong></p>
            <p>Email: <strong>{{user.email}}</strong></p>
            <p>Phone number: <strong>{{user.phoneNumber}}</strong></p>
            <p>Age: <strong>{{user.age}}</strong></p>
          </div>
      </div>
    </div>
</ion-content>

数据被传递到数据库中。但问题是我无法显示姓名、年龄、电话号码等自定义数据。只是出现电子邮件和uid。所以有什么问题？如何显示来自 Cloud Firestore 的自定义数据？

标签： javascriptangularfirebaseionic-frameworkgoogle-cloud-firestore

Answer 1

是因为你没有定义姓名、电话号码和年龄吗？

#打字稿

    setUserData(user, name?, phoneNumber?, age?) {
      const userRef : AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
      const userData: User = {
        uid: user.uid,
        name: user.name,
        email: user.email,
        phoneNumber: user.phoneNumber,
        age: user.age,
      }
      return userRef.set(userData, {
        merge: true
      })
    }

请让我知道它是否有效？我仍在学习。谢谢你。