Angular 4 Firebase从数据库读取数据并显示到浏览器

我正在学习 Angular 4 并且正在使用 firebase 数据库。但是我完全不知道如何使对象出现在我的应用程序的浏览器上。 我目前想获取用户的所有数据并将其显示在浏览器上。

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() {
  }

}

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

如果你想在 Browser 上显示数据，就不需要使用 console.log()。Angularfire 有它自己的功能。该链接完全关注您的问题 https://github.com/angular/angularfire2/blob/master/docs/3-retrieving-data-as-lists.md

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

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>

希望它能减少您对此事的困惑。如果您有不明白的地方，请再次询问我