在使用 concat 将记录保存到数据库之前保存 Angular firebase 图像答案

【问题标题】：Angular firebase image saving before record saving to the database using concat在使用 concat 将记录保存到数据库之前保存 Angular firebase 图像
【发布时间】：2021-10-18 07:47:04
【问题描述】：

我在实现将图像保存到 firebase、将 url 返回到表单 img 值并将表单值保存在数据库中的逻辑时遇到问题，问题是当我在内部正确更新表单 url 时firebase 保存订阅，我在第二个保存子的响应中得到相同的表单 url 为空！

代码：

  upload(): void {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;
    let currentFileUpload = new FileUpload(file);

    this.pushedFile$ = this.service.pushFileToStorage(currentFileUpload).pipe(
      map(url => {
        this.service.form.patchValue({ img: url });
        console.log("inside upload:", this.service.form.value)
      })
    );
  }

  onSubmit() {

    this.upload();
    
    let save$ = this.service.save(this.service.form.value).pipe(map(data => console.log("save data: ", data) ));

    concat(this.pushedFile$, save$).subscribe((data => console.log("subscription: ", data)));
  }

  pushFileToStorage(fileUpload: FileUpload): Observable<any> {
    const filePath = `${this.basePath}/${fileUpload.file.name}`;
    const storageRef = this.firebaseStorage.ref(filePath);
    const uploadTask = this.firebaseStorage.upload(filePath, fileUpload.file);

    return <Observable<any>>uploadTask.snapshotChanges().pipe(
      last(),
      mergeMap(() => {
        return storageRef.getDownloadURL().pipe(
          map((url) => url)
        )
      })
    );
}

检查员输出：

licons/v109/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 abstract-form.component.ts:43 内部上传：{id: null, name: 'Sudan', nameAr: null, quantityPerUnit: null, img: 'https://firebasestorage.googleapis.com/v0/b/pos- ad…=media&token=960e9251-6ef8-4e01-8efa-a54745f9906f', …}averageCost: nullbarcode: nullcategory: nulldiscount: nullid: nullimg: "https://firebasestorage.googleapis.com/v0/b/pos-admin-f8a9f .appspot.com/o/products%2Fmaryam.jpg?alt=media&token=960e9251-6ef8-4e01-8efa-a54745f9906f"name: "Sudan"nameAr: nullquantity: nullquantityPerUnit: nullsellPrice: 11supplier: nullvatPercentage: nullvatValue: null[[原型]]：目的 abstract-form.component.ts:54 订阅：未定义 abstract-form.component.ts:52 保存数据：{id: 132, name: 'Sudan', nameAr: null, img: null, barcode: null, ...}averageCost: nullbarcode: nullcategory: nulldepreciation: nulldiscount: nullid: 132img : nullname: "苏丹"nameAr: nullquantity: nullquantityPerUnit: nullsellPrice: 11supplier: nullvatPercentage: nullvatValue: null[[Prototype]]: Object abstract-form.component.ts:54 订阅：未定义

【问题讨论】：

标签： angular firebase

【解决方案1】：

我设法使用 concatAll() 让它工作

let pushedFile$ = this.service.pushFileToStorage(currentFileUpload).pipe(map(url => item["img"] = url));

let combined$ = of(pushedFile$, save$);

combined$.pipe(concatAll()).subscribe();

【讨论】：