从Firebase检索数据到数组

时间:2019-05-18 09:07:45

标签: angular typescript web

我需要显示在Firebase中创建的所有用户。

我试图列出一个可观察的列表,但没有显示任何内容

export class UsersListComponent implements OnInit {
  users: Observable<any[]> ;

  constructor(db2: AngularFireDatabase) {
    this.users = db2.list('/users').valueChanges();

          }

这是我的HTML

<ul>
  <li *ngFor="let user of users | async">
     {{ user | json }}
  </li>
</ul>

我什么都没显示在屏幕上,这是我的Firebase结构

Firebase结构

enter image description here

1 个答案:

答案 0 :(得分:0)

正确的方法是通过服务检索用户,创建角度服务

export class UserService {

  usertList: AngularFireList<any>;

  constructor(
    private db: AngularFireDatabase
  ) { }

  getUsers() {
    return this.userList= this.db.list('users');
  }
}

及其组件中,

constructor(
    private userService: UserService
  ) { }

  ngOnInit() {
    this.userService.getUsers().snapshotChanges().subscribe(
      item => {
        this.userList= [];
        item.forEach(
          element => {
            const x = element.payload.toJSON();
            x['$key'] = element.key;
            this.userList.push(x as User);
          }
        );
      }
    );
  }