InvalidPipeArgument：管道“AsyncPipe”Angular 6 和 FIrebase 的“[object Object]”答案

【问题标题】：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Angular 6 and FIrebaseInvalidPipeArgument：管道“AsyncPipe”Angular 6 和 FIrebase 的“[object Object]”
【发布时间】：2019-01-03 03:50:51
【问题描述】：

**错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”。 **

我正在尝试取消订阅 observable

Angular-cli = 6.0.3

HTML home.component.html

<div class="starter-template">
  <h1>Firebase Data</h1>
  <ul>
    <li *ngFor="let course of courses$ | async">
      {{ course.$value }}
    </li>
  </ul>
</div>

Typescript home.component.ts

export class HomeComponent {
  courses$;
  constructor(db: AngularFireDatabase) {
    this.courses$ = db.list('/course');
    }
}

【问题讨论】：

标签： angular firebase rxjs angular6

【解决方案1】：

文档（https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md#retrieve-data）说你需要使用.valueChanges()：

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

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
       {{ item | json }}
    </li>
  </ul>
  `,
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();
  }
}

【讨论】：