Angularfire 获取列表并动态渲染它

Question

我尝试动态使用 Angular 但我的 HMI 出现了一些问题，所以现在我发现 Angular 着火了。 Doc 看起来有点过时，我发现现在没有很好的例子。我需要构建一个动态应用程序。我按照 angularfire2 文档 + 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>

会报错：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

尝试添加

| async

但是会给

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

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

Angularfire 获取列表并动态渲染它

Angularfire get list and render it dynamically

firebase

angularfire2

angular