Question

首先，我想问一下没有时间离开这篇文章的人，因为这需要一些时间来阅读。其次，如果你还在这里，我会试着解释一下我自己无法处理的情况。

用户登录（电子邮件，密码） *已经执行此操作

数据库：

Profile {
UID {
  email
  }
}

用户添加他的个人资料信息（名字，姓氏，用户名，头像） *已经这样做了

数据库：

 Profile {
    UID {
      email
      url
      firstname
      lastname
      username
        }
    }

用户添加帖子* *已完成此操作

数据库：

Profile {
   UID {
     email
     url
     firstname
     lastname
     username
        post* {
          name (file name)
          url (image url)
          progress(upload progress)

      }
   }
}

我想做什么（努力尝试，但不能）：

 Profile {
       UID {
         email
         url
         firstname
         lastname
         username
            post {
              name (file name)
              url (image url)
              progress(upload progress)
                 inner { //new
                    description //new
                    title //new
                    url (post image 1) //new
                    url (post image 2) //new
                    url (post image 3) //new
             }

          }
       }

用户点击其中一个项目*
用户在另一页上看到this.post （仅）信息（帖子和内部） *

代码： https://github.com/codediodeio/angular-firestarter

我正在使用此代码来实现此目的。我只需使用 上传服务 来创建新帖子。主要问题是我无法在upload.ts文件中添加任何其他字符串。

试过：

添加标题，说明uplaod.ts
使用ngmodel（带有可观察的上传）
没有任何反应，或两个输入都未定义。

Upload.ts：

export class Upload {
  $key: string;
  file: File;
  name: string;
  title: string; //new
  description: string; //new
  url: string;
  progress: number;
  createdAt: Date = new Date();

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

Upload.service.ts：

 uploads: Observable<Upload[]>;


  pushUpload(upload: Upload) {
    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.saveFileData(upload);
          return;
        } else {
          console.error('No download URL!');
        }
      },
    );
  }

upload.form.ts：

   export class UploadFormComponent {

  selectedFiles: FileList | null;
  currentUpload: Upload;
  uploads: Observable<Upload[]>
  constructor(private upSvc: UploadService) { }

  detectFiles($event: Event) {
      this.selectedFiles = ($event.target as HTMLInputElement).files;
  }

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

upload.form.html：

         <h3>Single File Upload</h3>

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

错误（清除）：

标题和说明未定义。

如果有人能解释我我在标题和描述上做错了什么会很好，并且可能会解释如何在这之后做出这两件事：

用户点击其中一个项目*
用户在另一个

（仅）

（帖子和内部）

感谢您的时间。

Angular 5 firebase数据库查询

0 个答案: