未捕获的TypeError：无法读取未定义的属性“存储”

Question

我正在将图像上传到Firebase，然后尝试将其下载URL保存到ionic storage，但它给了我这个错误

Uncaught TypeError: Cannot read property 'storage' of undefined

这是我的代码：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as firebase from 'firebase';
import { Storage } from '@ionic/storage';
import uuid from 'uuid/v1'; //here change 'v1' with the version you desire to use

export interface Dress {
  id?: string;
  title: string;
  description: string;
  createdAt: number;
  category: string;
  price: number;
  city: string;
  type: string;
  size: string;
  action: string;
  image_1: string;
  image_2: string;
  image_3: string;
}
export interface Category {
  name: string;
}
export interface City {
  name: string;
}
export interface Type {
  name: string;
}
export interface Size {
  name: string;
}
export interface Action {
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class DressService {
  private dressCollection: AngularFirestoreCollection<Dress>;
  private dress: Observable<Dress[]>;
  private categoryCollection: AngularFirestoreCollection<Category>;
  private category: Observable<Category[]>;
  private cityCollection: AngularFirestoreCollection<City>;
  private city: Observable<City[]>;
  private typeCollection: AngularFirestoreCollection<Type>;
  private type: Observable<Type[]>;
  private sizeCollection: AngularFirestoreCollection<Size>;
  private size: Observable<Size[]>;
  private actionCollection: AngularFirestoreCollection<Action>;
  private action: Observable<Action[]>;
  id = uuid();

  constructor(db: AngularFirestore,
              public storage: Storage,
  ) {
    this.dressCollection = db.collection<Dress>('dress');
    this.dress = this.dressCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
    this.categoryCollection = db.collection<Category>('categories');
    this.category = this.categoryCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
    this.cityCollection = db.collection<City>('cities');
    this.city = this.cityCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
    this.typeCollection = db.collection<Type>('types');
    this.type = this.typeCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
    this.sizeCollection = db.collection<Size>('sizes');
    this.size = this.sizeCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
    this.actionCollection = db.collection<Action>('actions');
    this.action = this.actionCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }
  getDresses() {
    return this.dress;
  }
  getCategories() {
    return this.category;
  }
  getTypes() {
    return this.type;
  }
  getCities() {
    return this.city;
  }
  getSizes() {
    return this.size;
  }
  getActions() {
    return this.action;
  }
  getDress(id) {
    return this.dressCollection.doc<Dress>(id).valueChanges();
  }
  updateDress(dress: Dress, id: string) {
    return this.dressCollection.doc(id).update(dress);
  }
  addDress(dress: Dress) {
    return this.dressCollection.add(dress);
  }
  removeDress(id) {
    return this.dressCollection.doc(id).delete();
  }
  uploadImage(img, numb) {
    const ref = firebase.database().ref('Uploads');
    const storage = firebase.storage();
    const pathReference = storage.ref('images/' + this.id + numb + '.jpg');
    const message = img;
    pathReference.putString(message, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
      console.log('Uploaded a base64url string!');
      pathReference.getDownloadURL().then(function (url) {
        console.log(url);
        console.log(typeof(url));
        if (numb === 1) {
          this.storage.set('image_1_url', url);
        }
        if (numb === 2) {
          this.storage.set('image_2_url', url);
        }
        if (numb === 3) {
          this.storage.set('image_3_url', url);
        }
      });
    });


  }
}

当我在选择图像后调用uploadImage()函数时，它已经上载并生成了URL，但无法保存，错误来自此行

        if (numb === 1) {
          this.storage.set('image_1_url', url);
        }

我有适合我的Firebase的配置，并且一切正常，只有在ionic storage部分

失败了

Answer 1

请改用匿名箭头函数，因为前者不会创建自己的执行范围，而后者会创建，因此您的“ this”开始指向它：

uploadImage(img, numb) {
    const ref = firebase.database().ref('Uploads');
    const storage = firebase.storage();
    const pathReference = storage.ref('images/' + this.id + numb + '.jpg');
    const message = img;
    pathReference.putString(message, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
      console.log('Uploaded a base64url string!');
      // see here replaced 'function()' with =>:
      pathReference.getDownloadURL().then((url)=>{
        console.log(url);
        console.log(typeof(url));
        if (numb === 1) {
          this.storage.set('image_1_url', url);
        }
        if (numb === 2) {
          this.storage.set('image_2_url', url);
        }
        if (numb === 3) {
          this.storage.set('image_3_url', url);
        }
      });
    });


  }