Angular 4 Firebase从数据库读取数据并显示到浏览器 [英] Angular 4 Firebase Read data from database and display to browser

问题描述

我正在学习Angular 4并且正在使用Firebase数据库，但是我完全迷失了如何使对象出现在应用程序的浏览器中的方法.我目前想从用户那里获取所有数据，并在浏览器中显示它们.

I am learning Angular 4 and I am using firebase database.But I am completly lost on how I can make the objects apear on the browser of my application. I currently want to take all the data from users and display them on the browser.

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';

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

  constructor() {
    var allUsers = firebase.database().ref('users/');
      var db = firebase.database().ref('/users/');
      // Attach an asynchronous callback to read the data at our posts reference
        db.on("value", function(snapshot) {
          console.log(snapshot.val());
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });
          }

  ngOnInit() {
  }

}

一切正常，我可以在控制台上看到我的数据.但是，您能帮助我如何使控制台上的数据显示在浏览器上吗?

Everything works fine and I can see my data on the console.But can you help me on how I can make the data on the console apear on the browser??

推荐答案

如果要在Browser上显示数据，则无需使用console.log().Angularfire为此具有自己的功能.此链接完全针对您的问题

Well there is no need to use console.log() if you want to display data on Browser.Angularfire has its own functions for this. This link focus exactly on your problem

这里是一个示例，该示例从数据库中获取所有用户名并将其显示为列表

Here is an example that takes all the users name from a database and displays them as a list

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';

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

    users:FirebaseListObservable<any>;;
    constructor(db2: AngularFireDatabase) {
    this.users = db2.list('users');
          }
  ngOnInit() {
  }

以及以下HTML代码

<div class="container">
  <p>Show all users</p>
  <ul>
  <li *ngFor="let user of users | async">
       {{ user.name | json }}
    </li>
  </ul>
</div>

希望它减少了您对此事的困惑.如果您不了解某些内容，请再次询问我

Hope it reduced your confusion on the matter.If you didnt understant something plz ask me again

这篇关于Angular 4 Firebase从数据库读取数据并显示到浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！