从 Firebase 上传和下载答案

【问题标题】：Uploading and downloading from Firebase从 Firebase 上传和下载
【发布时间】：2018-05-08 20:10:12
【问题描述】：

我正在使用 Ionic 开发照片应用程序，但是当我在上传后尝试显示它们时遇到了一些问题。

这是我的 .ts 文件

interface FeaturedPhotoUrls {
  url1?: string;
  url2?: string;
}


@IonicPage(
  {
    name: 'AbstractPage'
  }
)
@Component({
  selector: 'page-abstract',
  templateUrl: 'abstract.html',
})
export class AbstractPage {

 featuredPhotoStream: AngularFireObject<FeaturedPhotoUrls>;

  constructor(public navCtrl: NavController, public navParams: NavParams, private db: AngularFireDatabase) {

    this.featuredPhotoStream = this.db.object('/photos/abstract');
  }
  featuredPhotoSelected(event: any) {


    const file: File = event.target.files[0];
    console.log("Selected filename: ", file.name);

    const metaData = {'contentType': file.type};
    const storageRef: firebase.storage.Reference = firebase.storage().ref('/photos/abstract/url1');
    storageRef.put(file, metaData);
    console.log("Uploading: ", file.name)
     }

这在 html 中：

<input type="file" (change)="featuredPhotoSelected($event)">
<img [src]="(featuredPhotoStream | async)?.url1">

这就是我得到的：

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

我做错了什么？

【问题讨论】：

标签： javascript node.js angular firebase ionic3

【解决方案1】：

从文档中，传入异步的内容必须是 Promise 或 Observable：https://angular.io/api/common/AsyncPipe

从文档中，您必须使用 .valueChanges() 将其变成您需要的：

this.db.object('/photos/abstract').valueChanges();

查看此文档作为示例https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md#user-content-retrieve-data

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
  <h1>{{ (item | async)?.name }}</h1>
  `,
})
export class AppComponent {
  item: Observable<any>;
  constructor(db: AngularFireDatabase) {
    this.item = db.object('item').valueChanges();
  }
}

【讨论】：