角4 Firebaseデータベースからデータを読み込んでブラウザに表示

Question

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

} 

すべてが正常に動作し、私はあなたが、私は、コンソールブラウザ上でつくれ上のデータを作ることができますどのように私を助けることができるconsole.Butに私のデータを見ることができます？

Answer 1

ブラウザでデータを表示する場合は、console.log（）を使用する必要はありません.Angularfireには独自の関数があります。ここで This link focus exactly on your problem

はそれがあなたの混乱を軽減ホープ

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> 

をデータベースからすべてのユーザー名を受け取り、リストとしてそれらを表示する例ですあなたが何かを理解できなかった場合は、再び私に尋ねてください。