Angular 未捕获类型错误：无法读取属性'；存储'；未定义的

我正在将一个图像上载到firebase，然后试图将其下载URL保存到

离子存储

，但它给了我这个错误

未捕获类型错误：无法读取未定义的属性“存储”

这是我的密码：

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);
        }
      });
    });


  }
}

---

我为我的firebase提供了正确的配置，所有功能都运行得很好，只有当涉及到

离子存储部分时才会失败请在匿名部分使用fat arrow函数，因为前者不创建自己的执行范围，而后者创建，因此您的“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);
        }
      });
    });


  }

请在匿名函数上使用fat arrow函数，因为前者不创建自己的执行范围，而后者创建自己的执行范围，因此您的“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);
        }
      });
    });


  }

您应该在uploadImage（）函数中使用箭头函数。如果您看过firebase.storage，请改用gcloud.storage:@nullptr.t上载和存储在线文件的过程非常有效。当我试图在本地保存URL以供以后重用时，这里的问题现在我看到了-问题是您试图使用
storage.set（'name'，'Max'）
这是ionic storage对象的一种方法，但您也将firebase.storage设置为存储对象，请尝试重新命名firebase存储对象以区分ionic存储。您应该在uploadImage（）函数中使用箭头函数。您是否查看过firebase.storage已弃用，改用gcloud.storage:@nullptr.t上传和存储在线文件的过程非常有效。当我试图在本地保存URL以供以后重用时，这里的问题现在我看到了-问题是您试图使用
storage.set（'name'，'Max'）
这是离子存储对象的一种方法，但您也将firebase.storage设置为存储对象，请尝试重新命名firebase存储对象以区分离子存储。