FirebaseListObservable无法填充

Question

我正在使用Firebase数据进行角度测试项目。我面临的问题是在Firebase数据库中显示数据。我可以将数据推送到数据库，但看不到页面中的数据。我在我的角度项目中使用angularfire2。我似乎错过了一些东西，但我不知道该怎么办。下面是我的代码。

这是我的组件。

import { Component } from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import {Observable} from "rxjs/Observable";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

items: FirebaseListObservable<any[]>;

msg: string = '';
constructor(public af: AngularFireDatabase) {
  this.items = af.list('/messages');
}

send(message: string) {
  this.items.push({ message: message });
  this.msg = '';
}
}

这是我的html

  <input type="submit" class="submit" value="Send now" (click)="send(message.value)">
  <div class="details-container" *ngFor="let item of items | async">
    <div class="row">
      <div class="medium-9 columns">
        <p> {{ item.message }} </p>
       </div>
      <div class="medium-3 columns">
        <button>delete</button>
        <button>edit</button>
      </div>
    </div>
  </div>

</div>

这是我的Firebase数据库

中的数据

Answer 1

我在这里徘徊，但我认为Angular无法理解异步管道，因为您所拥有的“项目”不是Observable，因此请在列表后调用.valueChanges()方法。

请参阅https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md，以详细了解valueChanges()在您所处的情况下的工作。

我在上面的文档中以及在文档中您所拥有的内容中看到了一些关键差异，因为“ list”方法返回了一个Observable，它甚至不是一个数组，在文档中“项”被声明为AngularFireList

现在，如果您需要将项目视为数组，然后将列表转换为可观察的形式，例如：this.items = db.list('items').valueChanges();并订阅它并填充所需的任何数组，尽管当您可以使用时，这对我来说似乎有点多余异步管道。