Angular 4 Firebaseデータベースからデータを読み取り、ブラウザに表示する

debugcn 投稿 Dev

Vasilis Michail

私はAngular4を学習していて、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() {
  }

}

すべて正常に動作し、コンソールにデータを表示できますが、コンソールのデータをブラウザーに表示する方法について教えてください。

Vasilis Michail

Browser.Angularfireにデータを表示する場合は、console.log（）を使用する必要はありません。これには独自の関数があります。このリンクはあなたの問題に正確に焦点を当てています

これは、データベースからすべてのユーザー名を取得し、それらをリストとして表示する例です。

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>

それが問題に関するあなたの混乱を減らしたことを願っています。あなたが何かを理解していなかったなら、plzはもう一度私に尋ねてください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]