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>

会给出错误：

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

试图添加

|异步

但是会给予

错误错误：InvalidPipeArgument：管道的“ [对象对象]” “ 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获取列表并动态呈现

1 个答案: