TypeError：无法设置未定义的属性[重复]答案

【问题标题】：TypeError: Cannot set properties of undefined [duplicate]TypeError：无法设置未定义的属性[重复]
【发布时间】：2021-12-15 16:34:14
【问题描述】：

我正在尝试将图像上传到 firebase 存储，然后将图像 url 添加到 firestore 数据库。

  userId: string;
  fullname: string;
  phone: string;
  userPhoto: string;


  constructor(
    private auth: AuthService,
    public afauth: AngularFireAuth,
    private afs: AngularFirestore,
    private loadingCtrl: LoadingController,
    private toastr: ToastController,
    private angularFireStorage: AngularFireStorage
  ) { }

  ngOnInit() {
    this.auth.user$.subscribe(user => {
      this.userId = user.userId;
      this.fullname = user.userName;
      this.phone = user.userPhone;
      this.userPhoto = user.userPhoto;
    })
    }


    imageName() {
      const newTime = Math.floor(Date.now() / 1000);
      return Math.floor(Math.random() * 20) + newTime;
    }
  
    async storeImage(imageData: any, location: string) {
      try {
        const imageName = this.imageName();
        return new Promise((resolve, reject) => {
          const pictureRef = this.angularFireStorage.ref(location + imageName);
          pictureRef
            .put(imageData)
            .then(function () {
              pictureRef.getDownloadURL().subscribe((url: any) => {
                resolve(url);
                console.log(url);
                this.userPhoto = url //error
              //   this.afs.collection('user').doc(this.userId).set({
              //     'userPhoto': url,
              //     'editedAt': Date.now()
              //   }, {merge: true})
              });
            })
            .catch((error) => {
              reject(error);
            });
        });
      } catch (e) {}
    }

在我尝试为 userPhoto 变量赋值后，我收到了这个错误：TypeError: Cannot set properties of undefined (setting 'userPhoto')。我在发生这种情况的行的注释中写了错误。有人可以帮助我我做错了什么？

【问题讨论】：

.then(function () {在这里使用箭头功能
@RobertoZvjerković 谢谢，它有效。

标签： angular typescript firebase

【解决方案1】：

回调中的范围不再是整个组件之一。您可以通过在组件上添加方法并从回调中调用它来使用组件的范围。在方法中，可以参考this作为组件本身。这是一个例子：

updateUserPhoto(url: string) {
    this.userPhoto = url
}

async storeImage(imageData: any, location: string) {
      try {
        const imageName = this.imageName();
        return new Promise((resolve, reject) => {
          const pictureRef = this.angularFireStorage.ref(location + imageName);
          pictureRef
            .put(imageData)
            .then(function () {
              pictureRef.getDownloadURL().subscribe((url: any) => {
                resolve(url);
                console.log(url);
                updateUserPhoto(url)
              //   this.afs.collection('user').doc(this.userId).set({
              //     'userPhoto': url,
              //     'editedAt': Date.now()
              //   }, {merge: true})
              });
            })
            .catch((error) => {
              reject(error);
            });
        });
      } catch (e) {}
    }

【讨论】：

如果我像updateUserPhoto(url) 一样使用它，那么我不能调用该函数，但是如果我像this.updateUserPhoto(url) 那样使用它，我会收到这个错误TypeError: Cannot read properties of undefined (reading 'updateUserPhoto')。

【解决方案2】：

在评论中，我从@RobertoZvjerković 那里得到了答案，也就是说，在我们看到这个.then(function () { 的那一行中，它应该看起来像这个.then(() => {。

【讨论】：