错误：InvalidPipeArgument：＆＃39; [object Object]＆＃39; for pipe＆＃39; AsyncPipe＆＃39;

Question

我试图关注this youtube视频教程，在视频的8:22点，我遇到了以下错误：

  

错误：InvalidPipeArgument：＆＃39; [object Object]＆＃39; for pipe＆＃39; AsyncPipe＆＃39;

这是他如何将信息存储在firebase中。

数据通过profile.html页面在firebase中设置。

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

此 profile.ts 看起来像这样

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

}

models / profile.ts 如下所示：

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

在本教程的这一点上，我们只是试图在主页上显示用户名。

我的 home.ts 文件如下所示：

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

我的 home.html 页面如下所示：

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

好像在home.ts中的这一行：

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

或这一行：

profileData: AngularFireObject<Profile>

或这一行：

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

是罪魁祸首。

但是，我不确定如何修复它。我按照作者的指示完全按照教程进行操作，对他来说效果很好。该教程仅用了5个月。我知道技术正在快速变化，5个月是很长一段时间，但它的进展如此之快，以至于它使学习变得不可能，因为所有教程在发布后立即被打破。你花了更多的时间来修复那些你不理解并无法理解的初学者的错误。

Answer 1

profileData属性不是可观察的，因此您无法使用async管道。

使用以下内容更新您的模板：

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

Answer 2

这对我有用{{（profileData）？。username}}

Answer 3

<强>喂

使用实时数据库时，版本5不再使用FirebaseListObservable和FirebaseObjectObservable，而是使用AngularFireList作为列表，使用AngularFireObject作为对象。

您现在应该使用valueChanges()。如果之后添加.valueChanges()，直接在同一语句中，您基本上可以获得您可以订阅的AngularFireObject / List的Observable（无论是列表还是对象）。

所以你需要做的就是这样：

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

profileData现在应该像这样声明为Observable（从'rxjs'导入{Observable};）

profileData : Observable<any>

现在在您看来，您应该能够看到您的财产

{{ (profileData | async)?.firstname }}