Question

我有uplaod.ts文件：

export class Project {
  $key: string;
  file: File;
  name: string;
  title: string;  //can't write this to db with ngModel (look below)
  cat: string; //can't write this to db with ngModel (look below)
  url: string;
  progress: number;
  createdAt: Date = new Date();

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

然后在upload.service中我使用了savefiledata（）的pushUpload（）函数：

//files
uploads:Observable<Project[]>;
project:AngularFirestoreCollection<Project[]>


//pushUpload uploads to storage

  pushUpload(upload: Project) {
    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot: firebase.storage.UploadTaskSnapshot) =>  {
        // upload in progress
        const snap = snapshot;
        upload.progress = (snap.bytesTransferred / snap.totalBytes) * 100

      },
      (error) => {
        // upload failed
        console.log(error);
      },
      () => {
        // upload success
        if (uploadTask.snapshot.downloadURL) {
          upload.url = uploadTask.snapshot.downloadURL;
          upload.name = upload.file.name;
          this.fire.collection(`users/${this.auth.userId}/projects`).add( { photoURL: upload.url, file: upload.file.name})
          this.saveFileData(upload);
          return;
        } else {
          console.error('No download URL!');
        }


      },

    );
  }



  // Writes the file details to the realtime db
  private saveFileData(upload: Project) {

    this.db.list(`profile/${this.auth.userId}/project`).push(upload);


  }

我可以将文件上传到存储空间并将数据库中的URL /文件名保存。但我无法使用ngModels保存Title和Cat。

upload.ts：

selectedFiles: FileList | null;
  currentUpload: Project;
     proinfo = {} as Project;


 uploadSingle() {
    const file = this.selectedFiles;
    if (file && file.length === 1) {
      this.currentUpload = new Project(file.item(0));
      this.navSrv.pushUpload(this.currentUpload);
    } else {
      console.error('No file found!');
    }
  }

upload.html：

<div class="box">
  <h3>Single File Upload</h3>

  <label>
    <input type="file" class="button" (change)="detectFiles($event)">
  </label>
  <label>
    <input [(ngModel)]="proinfo.title" type="text" class="button">
  </label>
  <label>
    <input [(ngModel)]="proinfo.cat" type="text" class="button">
  </label>
  <button class="button is-primary"
          [disabled]="!selectedFiles"
          (click)="uploadSingle()">
    Upload Single
  </button>
  <hr>

  <h3>Multiple File Upload</h3>

  <label>
    <input type="file" class="button" (change)="detectFiles($event)" multiple>
  </label>
  <button class="button is-primary"
          [disabled]="!selectedFiles"
          (click)="uploadMulti()">
    Upload Multiple
  </button>
</div>

我收到0错误，数据未保存在db中（只有名称，网址和进度。）

主要问题是：如何使用相同列表中的网址，名称，进度来保存数据库中的标题和猫？

Angular firebase不支持字段值

0 个答案: