Загрузка и загрузка с firebase

Question

Я работаю над приложением фотографий в ионном но когда я пытаюсь отобразить их после загрузки, у меня возникают некоторые проблемы.

Это мой .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">

и вот что я получаю:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: InvalidPipeArgument: '[объект объекта]' для трубы 'AsyncPipe' Ошибка: InvalidPipeArgument: '[объект объекта]' для трубы 'AsyncPipe'

Что я сделал не так?

Answer 1

Из документов то, что передается в асинхронный режим, должно быть Обещанием или Наблюдаемым: 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();
  }
}