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

Question

我想将文件特别是图像上传到我的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>

如果需要更多代码段，请与我们联系。提前谢谢。

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

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