Angularfire获取列表并动态渲染

Question

我尝试动态使用Angular，但在HMI中遇到了一些问题，所以现在我发现了Angularfire。Doc看起来有点过时了，我发现现在没有好的例子。我需要建立一个动态应用程序。我遵循angularfire2 docs+stackoveflow中的步骤得到了这个：

export class RoomsComponent implements OnInit {
rooms: AngularFireList<Room[]>;
constructor(private roomService: RoomService, private router: Router, private db: AngularFireDatabase) {
this.rooms = db.list('rooms');
console.log( this.rooms );
}

控制台输出：数据库列表("房间"(

<li *ngFor="let room of rooms">
<pre>{{ room.id }}</pre>
</li>

将给出错误：

错误：找不到不同的支持对象'[object object]'类型为"object"。NgFor只支持绑定到诸如数组。

尝试添加

|异步

但会给出

错误：管道的InvalidPipeArgument:"[object object]"异步管道">

Firebase数据库：数据库

(例如，如果在数据库中添加了某些内容，则需要在每个用户的页面中动态更新(如果能帮上忙就太好了！

Answer 1

将房间变量更改为

rooms: Observable<any>;

若要检索数据，您需要使用ValueChanges方法。

constructor(private roomService: RoomService, private router: Router, 
private db: AngularFireDatabase) {
this.rooms = db.list('rooms').valueChanges();;
console.log( this.rooms );
}