角度2を使用してFirebaseで配列を呼び出す

Question

角度2を使用してFirebase配列を呼び出す方法を知りたいと思います。ここの例では、Firebase DBに配列addnoteがあります。 Do the dishesの2つの別々の繰り返しがあり、それらをHTMLの順序付けられていないリストに印刷したいと思います。

私のprivate addsnotesにある[]はエラーをスローしますが、私は本当にそうは思わなかった。配列を出力する方法が理解できない場合は、私が達成しようとしていることを説明するために配列を使用しています。私はまた、コールが行われている関連領域をマークしました。

マイrainbow.component.html

<div><ul> 
    <li *ngFor="let addsnote of addsnotes">{{addsnote}}</li> 
</ul></div> 

マイfirebaseスキーマ：

マイrainbow.component.tsあなたがしたい場合

export class Rainbow implements OnInit{ 
private addsnotes: []; 
private username: string; 

ngOnInit(){ 
    var self = this; 
    var user = firebase.auth().currentUser; 
    var getUserInfo = firebase.database().ref('users/' + user.uid); 
    setTimeout(acquisition, 1000); 

    function acquisition(){ 
    if (user){ 
     getUserInfo.once('value', function(snapshot){ 
       self.username = snapshot.val().username; 
       self.addsnotes = snapshot.val().addnote; //incorrect 
      });  
     } 
    } 
} 

} 

Answer 1

あなたはAngularFire2になりたい場合は、観測の電力に調整する簡単です。 AngularFire2では、あなたのソリューションは

<div> 
    <ul> 
    <li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote.$value }}</li> 
    </ul> 
</div> 

rainbow.component.tsが

import { Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 
import { Observable } from 'rxjs/Observable'; 

export class RainbowComponent implements OnInit { 
    private addsnotes$: Observable<string[]>; 
    private username$: Observable<string>; 

    constructor (
    private af: AngularFire 
) {} 

    ngOnInit() { 
    let user = firebase.auth().currentUser, 
     userNamePath = `users/${user.uid}/username`, 
     notesPath = `users/${user.uid}/addnote`; 

    this.username$ = this.af.database.object(userNamePath); 
    this.addsnotes$ = this.af.database.list(notesPath); 
    } 
} 

あなたはasyncが必要になります

rainbow.component.html ...もっとこのようになります。あなたのテンプレートHTMLでObservablesを使用しているときに自動的に購読してデータを抽出します。これと前のコードとの大きな違いは、データが変更されるたびに、変更がHTMLビューに自動的に表示されることです。 once('value')を使用して1つのコールに制限する先のコードと同じようにしたい場合は、this.af.database.list(notesPath)の最後に.take(1)を追加して、リストの値を1回だけ取ります。

また、orderなどのメモにサブフィールドを追加することで、必要な順序で並べ替えることをお勧めします。あなたはAngularFire2 hereでソートする方法に関する情報を見つけることができます。

これが役に立ちます。

Answer 2

スティックaddsnotesを動作させるには、Web Firebase API（anglefire2なし）を使用すると、次のようになります。あなたはfirebaseエンドでの変更と自動更新ユーザーのノートを検出できるように

ngOnInit() { 
    let user = firebase.auth().currentUser; 

    // Used ES6 arrow function instead, which is built into Typescript 
    setTimeout(() => { 
    // Make sure user and user.uid are defined 
    if (user && user.uid) { 
     let userRef = firebase.database().ref(`users/${user.uid}`); 
     userRef.once('value', (snapshot) => { 
     let userInfo = snapshot.val() || {}; 
     this.username = userInfo['username']; 
     this.addsnotes = []; 

     // Traverse each child for 'addnote' 
     snapshot.child('addnote').forEach((childSnapshot) => { 
      let addnoteKey = childSnapshot.key, 
       addnote = childSnapshot.val(); 

      addnote['id'] = addnoteKey; // Saving the reference key if you want reference it later 
      self.addsnotes.push(addnote); 
     }); 
     } 
    } 
    }, 1000); 
}