【问题标题】:Property undefinded when I get data from Firebase当我从 Firebase 获取数据时属性未定义
【发布时间】:2018-09-16 17:50:21
【问题描述】:

我有以下服务:

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

}

感谢您的帮助!

【问题讨论】:

    标签: angular angular-cli


    【解决方案1】:

    您需要按如下方式订阅,

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-20
      • 2020-06-20
      • 2021-12-04
      相关资源
      最近更新 更多