Fehler: InvalidPipeArgument: '[object Object]' für pipe 'AsyncPipe'

Question

Ich versuche this youtube Video-Tutorial zu folgen und am 08.22 Punkt des Videos, ich laufe in die folgende Fehlermeldung:

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Diese sein, wie die Informationen in Feuerbasis gespeichert sind.

Die Daten werden in Firebase von einer profil.html-Seite festgelegt.

<ion-content padding> 
    <ion-item> 
     <ion-label floating>Username</ion-label> 
     <ion-input [(ngModel)]="profile.username"></ion-input> 
    </ion-item> 
    <ion-item> 
     <ion-label floating>First Name</ion-label> 
     <ion-input [(ngModel)]="profile.firstname"></ion-input> 
    </ion-item> 
    <ion-item> 
     <ion-label floating>Last Name</ion-label> 
     <ion-input [(ngModel)]="profile.lastname"></ion-input> 
    </ion-item> 

    <button ion-button block (click)="createProfile()">Create Profile</button> 

</ion-content> 

diese profile.ts ähnliche

import { Profile } from '../../models/profile'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

/** 
* Generated class for the ProfilePage page. 
* 
* See https://ionicframework.com/docs/components/#navigation for more info on 
* Ionic pages and navigation. 
*/ 

@IonicPage() 
@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html', 
}) 
export class ProfilePage { 

    profile = {} as Profile; 

    constructor(
    private afAuth: AngularFireAuth, 
    private afDatabase: AngularFireDatabase, 
    public navCtrl: NavController, 
    public navParams: NavParams) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ProfilePage'); 
    } 

    createProfile(){ 
    this.afAuth.authState.take(1).subscribe(auth => { 
     this.afDatabase.object(`profile/${auth.uid}`).set(this.profile) 
     .then(() => this.navCtrl.setRoot('HomePage')); 
    }) 
    } 

} 

Die Modelle/profile.ts sieht wie folgt aussieht: nur wir sind

export interface Profile { 
    username: string; 
    firstName: string; 
    lastName: string; 
} 

An dieser Stelle im Tutorial einfach versuchen, den Benutzernamen auf der Homepage anzuzeigen.

Meine home.ts Datei sieht wie folgt aus:

import { Item } from './../../models/item/item.model'; 
import { Profile } from './../../models/profile'; 
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database'; 
import { Component } from '@angular/core'; 
import { NavController, IonicPage, ToastController } from 'ionic-angular'; 
import { ShoppingListService } from '../../services/shopping-list/shopping-list.service'; 
import { Observable } from 'rxjs/Observable'; 
import { AngularFireAuth } from 'angularfire2/auth'; 

@IonicPage() 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    profileData: FirebaseObjectObservable<Profile> 
    shoppingList$: Observable<Item[]> 

    constructor(
    private afAuth: AngularFireAuth, 
    private afDatabase: AngularFireDatabase, 
    private toast: ToastController, 
    public navCtrl: NavController, 
    private shopping:ShoppingListService) { 
    this.shoppingList$ = this.shopping 
     .getShoppingList() 
     .snapshotChanges() 
     .map(
      changes => { 
       return changes.map(c => ({ 
        key: c.payload.key, ...c.payload.val() 
       })); 
      }); 
    } 

    ionViewWillLoad(){ 
     this.afAuth.authState.subscribe(data => { 
     if(data && data.email && data.uid){ 
      this.toast.create({ 
      message: `Welcome to the Jungle, ${data.email}`, 
      duration: 3000 
      }).present(); 
      this.profileData = this.afDatabase.object(`profile/${data.uid}`) 

     } else { 
     this.toast.create({ 
      message: `Could not log you in`, 
      duration: 3000 
      }).present(); 
     } 
    } 
)} 

Mein home.html Seite sieht wie folgt aus:

<ion-header> 
    <ion-navbar color="primary"> 
    <ion-title> 
     Shopping List 
    </ion-title> 
    <ion-buttons end> 
     <button navPush='AddShoppingItemPage' ion-button> 
      <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <p>Username: {{(profileData | async)?.username}}</p> 
    <ion-list> 
    <ion-list-header> 
     Items 
    </ion-list-header> 
    <ion-item *ngFor="let item of shoppingList$ | async" detail-push navPush="EditShoppingItemPage" [navParams]="{item: item}"> 
     {{item.name}} 
    </ion-item> 
    </ion-list> 
</ion-content> 

Es scheint, als ob entweder diese Linie im Haus. ts:

this.profileData = this.afDatabase.object(`profile/${data.uid}`) 

o r diese Zeile:

profileData: AngularFireObject<Profile> 

oder diese Zeile:

import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database'; 

ist der Täter.

Allerdings bin ich mir nicht sicher, wie es zu beheben ist. Ich habe das Tutorial genau so verfolgt, wie der Autor es angewiesen hat, und es funktioniert gut für ihn. Das Tutorial ist nur 5 Monate alt. Ich weiß, dass sich die Technologie rasend schnell verändert und 5 Monate sind eine lange Zeit, aber sie schreitet so schnell voran, dass sie das Lernen unmöglich macht, da alle Tutorials sofort nach ihrer Veröffentlichung gebrochen werden. Sie verbringen mehr Zeit damit, Fehler zu beheben, die Sie als Anfänger nicht verstehen und nicht verstehen können.

Answer 1

Die profileData Eigenschaft ist keine Observable, so dass Sie die async Leitung damit nicht verwenden können.

Aktualisieren Sie Ihre Vorlage mit den folgenden:

<p>Username: {{profileData?.username}}</p> 

Answer 2

Das ist für mich gearbeitet {{(profileData) ?. username}}