Angular Firebase 存储，将用户输入属性分配给实时数据库答案

【问题标题】：Angular Firebase Storage, Assigning User Input Properties to Real Time DatabaseAngular Firebase 存储，将用户输入属性分配给实时数据库
【发布时间】：2018-06-04 17:46:37
【问题描述】：

我想将文件（尤其是图像）上传到我的 Firebase 存储。我从这个link 中找到了一个教程。我将 url 和 file 等更多属性添加到现有类中，并按照该链接上的函数模板进行操作。但显然我做错了什么。上传到我的存储的文件和控制台日志没有返回任何错误。我需要帮助以正确分配用户输入的其他属性，例如 prdName、prdCategory 和 prdSup。有人可以帮我解决这个问题吗？

//product.ts

export class Product {
  $prdKey: string;
  prdName: string;
  prdCategory: string; //Category
  prdSup: string; //supplier
  prdDescription: string;

  prdImage: string; //name
  prdUrl: string; //url
  file: File;

  constructor(file: File) {
    this.file = file;
  }
}

//service.ts
variable: any;
selectedProduct: Product = new Product(this.variable); //-->there was an error here that said expected 1 argument but got 0 so i add variable:any;

private basePath = '/product';

pushFileToStorage(Product: Product, progress: {
  percentage: number
}) {
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${Product.file.name}`).put(Product.file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
    (snapshot) => {
      // in progress
      const snap = snapshot as firebase.storage.UploadTaskSnapshot
      progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
    },
    (error) => {
      // fail
      console.log(error)
    },
    () => {
      // success
      /*--What should i assign here?--*/
      Product.prdName = Product.file.name,
      Product.prdCategory = Product.file.name,
      Product.prdSup = Product.file.name,
      Product.prdDescription = Product.file.name,
      /*------------------------------------------*/
      Product.prdUrl = uploadTask.snapshot.downloadURL,
      Product.prdImage = Product.file.name,
      
      this.saveFileData(Product)
    }
  );
}

private saveFileData(Product: Product) {
  this.firebase.list(`${this.basePath}/`).push(Product);
}

//component.ts

upload() {
  const file = this.selectedFiles.item(0);
  this.currentFileUpload = new Product(file);
  this.ProductService.pushFileToStorage(this.currentFileUpload, this.progress);
}

<!--component.html-->
<!--form snippet-->
<form #productForm="ngForm" (ngSubmit)="upload()">
<div class="form-group">
  <label>Product Name</label>
  <input class="form-control" name="prdName" #prdName="ngModel" [(ngModel)]="ProductService.selectedProduct.prdName">
</div>
<button type="submit" class="btn btn-primary">Submit</button> 
</form>

如果需要更多的 sn-ps，请告诉我。提前谢谢你。

（更新）我将推送功能放在//success 条件中，但是我不确定为每个类属性分配什么。 Product.prdName = Product.file.name, 会给我prdName 等于文件名。我试过Product.prdName = selectedProduct.prdName,，但看起来不正确。

【问题讨论】：

堆栈溢出不是一种非常有效的调试机制。您是否已经在调试器中单步执行了代码？如果是这样，Product.prdUrl = uploadTask.snapshot.downloadURL 是否将正确的值分配给 Product.prdUrl？
我更新了我的一些代码

标签： html angular typescript firebase firebase-storage

【解决方案1】：

我想通了，它应该看起来像这样，对我有用：D

() => {
  // success
  this.productList.push({
    prdName: this.selectedProduct.prdName,
    prdCategory: this.selectedProduct.prdCategory,
    prdSup: this.selectedProduct.prdSup,
    prdDescription: this.selectedProduct.prdDescription,
    prdUrl: this.selectedProduct.prdUrl = uploadTask.snapshot.downloadURL,
    prdImage: this.selectedProduct.prdImage = Product.file.name,
  })

  this.saveFileData(Product)
}

【讨论】：