时间戳

首页 > 解决方案 > 当我从 Firebase 获取数据时属性未定义

angular - 当我从 Firebase 获取数据时属性未定义

问题描述

我有以下服务：

@Injectable({
providedIn: 'root'
})
export class DatabaseService {
  private users: any[] = [];
  constructor(private db: AngularFireDatabase) { }

  getUsuarios(): any {
    this.db.database.ref('/users').once('value').then(
      data => {
        let users;
        usuarios = data.val() ? data.val() : {};
        console.log(users);
        return users;
      }
    );
  }
}

但我需要从 HomeComponent 中的 Firebase 数据库获取的数据。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  users: any[] = [];
  constructor(private _databaseService: DatabaseService) {
    this.users = this._databaseService.getUsuarios();
    console.log(this.users);
  }

  ngOnInit() {
  }

}

当我显示我的 console.log 时，这个打印未定义。

当我打开我的应用程序时，我可以获取这些数据并打印吗？

编辑：

只有我需要从 DatabaseService 返回 Obvervable 来运行它。

getUsuarios(): Observable<any> {
    let usuarios: any;
    /*let usuarios = new Observable<any>();
    this.db.database.ref('/usuarios').on('child_added', (snapshot) => {
      usuarios =  new Observable<any>().of(snapshot.val());
    });
    return usuarios;*/
    return Observable.create(observer => {
      // this.db.database.ref('/usuarios').on('child_added', (snapshot) => {
        this.db.database.ref('/usuarios').once('value').then( snapshot => {

        usuarios = snapshot.val();
        observer.next(usuarios);
        observer.complete();
      });
    });
  }

并更改 ngOnInit

export class HomeComponent implements OnInit {

  private _UsuariosObservable: Observable<any>;
  public usuarios: any[] = [];
  constructor(private _databaseService: DatabaseService) {  }

  ngOnInit() {
    this._UsuariosObservable = this._databaseService.getUsuarios();

    this._UsuariosObservable.subscribe((data) => {
      this.usuarios = data;
      for (let i = 0; i < this.usuarios.length; i++) {
        console.log(this.usuarios[i]);
      }
    }, ( err ) => {
       console.log(err);
    });
  }

}

感谢帮助！

标签： angularangular-cli

解决方案

您需要订阅如下，

this._databaseService.getUsuarios().subscribe((res)=>{
       this.users = res;
    },(err)=>{
      console.log(err);
});

推荐阅读