angular - switchMap 函数不执行其中的代码

问题描述

我正在尝试将带有图片的项目添加到我的firestore中，因为base64图片大于2Mb，我正在使用firestore来存储图像并获取url来设置相应的字段。

为此，我将我的项目发送到带有图片空白字段的 firebase，然后，我将图片发送到 firebase 存储。直到这里一切正常，但是当我试图获取下载 url 并将其设置为我的项目时，它不起作用。

这是我的代码：

这是我在 Firestore 中添加新项目的页面。

export class AddFoodPage implements OnInit {
...
  addFood() {
    this.setFood();
    this.foodService.addFood(this.food, this.foodPicture.base64).then(() => {
      this.presentAlert();
      this.tagList = [];
      this.ingredientList = [];
      this.addFoodForm.reset();
    });
  }
...

  private setFood() {
    this.food = this.addFoodForm.value;
    this.food.ingredientList = this.ingredientList;
    this.food.specials = this.tagList;

    this.foodPicture = this.imgService.getPicture();
    this.food.photoUrl = '';
  }

这是我为该项目提供的服务：


export class FoodService {
  private foodCollection: AngularFirestoreCollection<FoodView>;

  constructor(
    private afs: AngularFirestore,
    private authService: AuthService,
    private storage: AngularFireStorage
  ) {
    this.foodCollection = this.afs.collection('food');
  }

  async addFood(food: FoodView, base64String: string) {
    this.authService.getUserData().subscribe((_user) => {
      food.cookerName = _user.displayName;
      food.cookerId = _user.uid;
      from(this.foodCollection.add(food)).subscribe((addedFood) =>
        this.uploadFoodImage(base64String, addedFood.id, food.cookerId)
      );
    });
  }

private uploadFoodImage(
    base64String: string,
    foodId: string,
    userId: string
  ) {
    const filePath = `foods/${userId}/${foodId}`;

    const fileRef = this.storage.ref(filePath);
    const task: AngularFireUploadTask = fileRef.putString(
      base64String,
      'base64',
      { contentType: 'image/png' }
    );

    return from(task).pipe(
      switchMap(
        (result) => {
          return fileRef.getDownloadURL();
        }
        // Upload Task finished, get URL to the image
      ),
      switchMap((photoUrl) => {
        // Set the URL to the food document
        const uploadPromise = this.afs
          .doc(`food/${foodId}`)
          .set(photoUrl, { merge: true });
        console.log(photoUrl);
        return from(uploadPromise);
      })
    );
  }

在上面的代码中，switchMap函数中的代码没有执行，我不明白为什么，我错过了什么？图片被保存到firebase存储中，但是文件在firestore中没有更新。

这是我的食物模型：

export class FoodView {
  fid: string;
  cookerId: string;
  cookerName: string;
  title: string;
  photoUrl: string;
  ingredientList: string[] = [];
  type: string;
  hasAllergen: boolean;
  specials: string[];
  origin: string;
  price: number;
  quantity: number;
}

标签： angularfirebaseionic-frameworkgoogle-cloud-firestoregoogle-cloud-storage

您可以将 Observable 分为两种不同的类型：“热”和“冷”可观察对象。使用热可观察对象，您可以获得由可观察对象表示的函数之外的发出值的来源。另一方面，Cold observables 在自己的函数中创建源。因此，要让一个冷的 observable 发出任何值，身体必须至少运行一次。

在您的示例中，form(task)似乎创建了一个冷的可观察对象。因此，要首先创建数据源，您需要通过订阅来调用该函数。

缩短它：只需.subscribe()在管道后添加一个。

return from(task).pipe(
      switchMap(
        (result) => {
          return fileRef.getDownloadURL();
        }
        // Upload Task finished, get URL to the image
      ),
      switchMap((photoUrl) => {
        // Set the URL to the food document
        const uploadPromise = this.afs
          .doc(`food/${foodId}`)
          .set(photoUrl, { merge: true });
        console.log(photoUrl);
        return from(uploadPromise);
      })
    ).subscribe();

angular - switchMap 函数不执行其中的代码

问题描述

解决方案

推荐阅读