错误类型错误：“this.profileService.getUserProfile(...) 未定义”

Question

我创建了一个包含用户名、密码和电子邮件更新功能的个人资料页面。我得到了“更改电子邮件”和“更改密码”的工作，但不知何故，使用相同的方法应用于“更改名称”它不起作用

我确实尝试了一些安全导航运算符 (?) 但不起作用。请帮我指出我哪里错了，非常感谢。

profile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ProfilePage } from './profile.page';

const routes: Routes = [
  {
    path: '',
    component: ProfilePage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ProfilePage]
})
export class ProfilePageModule {}

profile.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>Profile Page</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="logOut()">
        <ion-icon slot="icon-only" name="log-out"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list> <ion-list-header> Personal Information </ion-list-header> </ion-list>
  <ion-item (click)="updateName()">
    <ion-label>
      <ion-grid>
        <ion-row>
          <ion-col class="text-left" size="5"> Name </ion-col>
          <ion-col
            class="text-center"
            size="7"
            *ngIf="userProfile?.firstName || userProfile?.lastName"
          >
            {{userProfile?.firstName}} {{userProfile?.lastName}}
          </ion-col>
          <ion-col
            size="7"
            class="placeholder-profile text-center"
            *ngIf="!userProfile?.firstName"
          >
            <span> Tap here to edit. </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label class="dob-label">Date of Birth</ion-label>
    <ion-datetime
      displayFormat="MMM D, YYYY"
      pickerFormat="D MMM YYYY"
      [(ngModel)]="birthDate"
      (ionChange)="updateDOB(birthDate)"
    >
    </ion-datetime>
  </ion-item>
  <ion-item (click)="updateEmail()">
    <ion-label>
      <ion-grid>
        <ion-row>
          <ion-col class="text-left" size="5"> Email </ion-col>
          <ion-col class="text-center" size="7" *ngIf="userProfile?.email">
            {{userProfile?.email}}
          </ion-col>
          <ion-col
            size="7"
            class="placeholder-profile text-center"
            *ngIf="!userProfile?.email"
          >
            <span> Tap here to edit. </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-label>
  </ion-item>

  <ion-item (click)="updatePassword()">
    <ion-label>
      <ion-grid>
        <ion-row>
          <ion-col class="text-left" size="5"> Password </ion-col>
          <ion-col class="text-center" size="7" class="placeholder-profile">
            <span> Tap here to edit. </span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-label>
  </ion-item>
</ion-content>

profile.page.ts

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { AuthService } from '../../services/user/auth.service';
import { ProfileService } from '../../services/user/profile.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
  public userProfile: any;
  public birthDate: Date;
  constructor(
    private alertCtrl: AlertController,
    private authService: AuthService,
    private profileService: ProfileService,
    private router: Router
  ) { }

  ngOnInit() {
    this.profileService
      .getUserProfile()
      .get()
      .then( userProfileSnapshot => {
        this.userProfile = userProfileSnapshot.data();
        this.birthDate = userProfileSnapshot.data().birthDate;
      });
  }
  async updateName(): Promise<void> {
    const alert = await this.alertCtrl.create({
      subHeader: 'Your first name & last name',
      inputs: [
        {
          type: 'text',
          name: 'firstName',
          placeholder: 'Your first name',
          value: this.userProfile.firstName,
        },
        {
          type: 'text',
          name: 'lastName',
          placeholder: 'Your last name',
          value: this.userProfile.lastName,
        },
      ],
      buttons: [
        { text: 'Cancel' },
        {
          text: 'Save',
          handler: data => {
            this.profileService.updateName(data.firstName, data.lastName);
          },
        },
      ],
    });
    await alert.present();
  }
  logOut(): void {
    this.authService.logoutUser().then( () => {
      this.router.navigateByUrl('login');
    });
  }

  updateDOB(birthDate: string): void {
    if (birthDate === undefined) {
      return;
    }
    this.profileService.updateDOB(birthDate);
  }
  async updateEmail(): Promise<void> {
    const alert = await this.alertCtrl.create({
      inputs: [
        { type: 'text', name: 'newEmail', placeholder: 'Your new email' },
        { name: 'password', placeholder: 'Your password', type: 'password' },
      ],
      buttons: [
        { text: 'Cancel' },
        {
          text: 'Save',
          handler: data => {
            this.profileService
              .updateEmail(data.newEmail, data.password)
              .then(() => {
                console.log('Email Changed Successfully');
              })
              .catch(error => {
                console.log('ERROR: ' + error.message);
              });
          },
        },
      ],
    });
    await alert.present();
  }

  async updatePassword(): Promise<void> {
    const alert = await this.alertCtrl.create({
      inputs: [
        { name: 'newPassword', placeholder: 'New password', type: 'password' },
        { name: 'oldPassword', placeholder: 'Old password', type: 'password' },
      ],
      buttons: [
        { text: 'Cancel' },
        {
          text: 'Save',
          handler: data => {
            this.profileService.updatePassword(
              data.newPassword,
              data.oldPassword
            );
          },
        },
      ],
    });
    await alert.present();
  }
}

profile.service.ts

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
@Injectable({
  providedIn: 'root'
})
export class ProfileService {
  public userProfile: firebase.firestore.DocumentReference;
  public currentUser: firebase.User;
  constructor() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
      this.currentUser = user;
      this.userProfile = firebase.firestore().doc(`/userProfile/${user.uid}`);
    }
  });
}
getUserProfile(): firebase.firestore.DocumentReference {
  return this.userProfile;
}
updateName(firstName: string, lastName: string): Promise<any> {
  return this.userProfile.update({ firstName, lastName });
}
updateDOB(birthDate: string): Promise<any> {
  return this.userProfile.update({ birthDate });
}
  async updateEmail(newEmail: string, password: string): Promise<any> {
  const credential: firebase.auth.AuthCredential = firebase.auth.EmailAuthProvider.credential(
    this.currentUser.email,
    password
  );

  try {
    await this.currentUser
      .reauthenticateAndRetrieveDataWithCredential(credential);
    this.currentUser.updateEmail(newEmail).then(() => {
      this.userProfile.update({ email: newEmail });
    });
  }
  catch (error) {
    console.error(error);
  }
}
  async updatePassword(newPassword: string, oldPassword: string): Promise<any> {
  const credential: firebase.auth.AuthCredential = firebase.auth.EmailAuthProvider.credential(
    this.currentUser.email,
    oldPassword
  );

  try {
    await this.currentUser
      .reauthenticateAndRetrieveDataWithCredential(credential);
    this.currentUser.updatePassword(newPassword).then(() => {
      console.log('Password Changed');
    });
  }
  catch (error) {
    console.error(error);
  }
}
}

ERROR TypeError: "this.profileService.getUserProfile(...) is undefined"

ERROR Error: "Uncaught (in promise): TypeError: this.userProfile is undefined

Answer 1

ngOnInit 生命周期挂钩在您的配置文件组件初始化期间触发：

ngOnInit() {
    this.profileService
      .getUserProfile()
      .get()
      .then( userProfileSnapshot => {
        this.userProfile = userProfileSnapshot.data();
        this.birthDate = userProfileSnapshot.data().birthDate;
      });
  }

同时，在您的配置文件服务中，“getUserProfile”方法仍未定义，因为您只返回一个类型已定义但没有值的 var：

getUserProfile(): firebase.firestore.DocumentReference {
  return this.userProfile;
}

这是因为给 this.userProfile 赋值的方法是异步的：

constructor() {
    firebase.auth().onAuthStateChanged(user => {
    if (user) {
      this.currentUser = user;
      this.userProfile = firebase.firestore().doc(`/userProfile/${user.uid}`);
    }
  });

因此，当您的生命周期挂钩已经尝试利用 userProfile 时，甚至不会返回用户值。

更新：

要解决此问题，您需要确保分配了一个承诺并发生正确的“等待”：

在您的服务中将 userProfile 和 currentUser 都定义为 Promises：

public userProfile: Promise<any>;
public currentUser: Promise<any>;

在你的构造函数中做：

this.currentUser = new Promise(async (resolve,reject)=>{
  let user = await firebase.auth().onAuthStateChanged();
  resolve(user)
})
this.userProfile = new Promise(async (resolve,reject)=>{
  let user = await this.currentUser;
  let userProfile = firebase.firestore().doc(`/userProfile/${user.uid}`);
})

现在你的方法应该返回 Promise 而不是未定义的变量。请检查一下。我无法验证此代码，但我构建了一个类似的测试用例，它应该可以工作，但也请参阅修复返回的类型：

getUserProfile(): Promise<any> {
  return this.userProfile;
}