Question

我正在以离子方式开发照片应用但是当我尝试在上传后显示它们时，我遇到了一些问题。

这是我的.ts文件

＆＃13;

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

＆＃13;

，这在html中：

＆＃13;

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

＆＃13;

这就是我得到的：

错误错误：未捕获（承诺）：错误：InvalidPipeArgument：＆＃39; [object Object]＆＃39; for pipe＆＃39; AsyncPipe＆＃39;错误：InvalidPipeArgument：＆＃39; [object Object]＆＃39; for pipe＆＃39; AsyncPipe＆＃39;

我做错了什么？

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

从firebase

1 个答案: