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

控制台输出： db.list('rooms')

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

</li>

会报错：

错误错误：找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables，例如 数组。

尝试添加

|异步

但会给

错误错误: InvalidPipeArgument: '[object Object]' 用于管道 '异步管道'

Firebase 数据库： database

（例如，如果在db中添加了某些内容，则需要在每个用户的页面中动态更新） 一些帮助会很棒！

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