使用Angular 2调用Firebase中的数组 [英] Calling arrays in Firebase using Angular 2

问题描述

我想知道如何使用Angular 2调用Firebase数组。在我的示例中，我的Firebase数据库中有一个数组 addnote 。有两个独立的迭代做菜，我想将它们打印到我的HTML无序列表中。
$ b $ < [] 在我的 private addsnotes 中抛出错误，我真的没有期待别的。在没有理解如何输出数组，我用它来说明我想要实现的。我也已经标出了打电话的相关方面。

我的 rainbow.component.html

 < DIV>< UL> 
< li * ngFor =let addsnote addsnotes> {{addsnote}}< / li> 
< / ul>< / div> 
  

我的 firebase 架构：

我的 rainbow.component.ts

<$ p $导入类Rainbow实现OnInit {
private addsnotes：[];
私人用户名：字符串;

ngOnInit（）{
var self = this;
var user = firebase.auth（）。currentUser;
var getUserInfo = firebase.database（）。ref（'users /'+ user.uid）;
setTimeout（acquisition，1000）;

函数acquisition（）{
if（user）{
getUserInfo.once（'value'，function（snapshot）{
self.username = snapshot.val （）.username;
self.addsnotes = snapshot.val（）。addnote; //不正确的
}）;






$ div class =如果你想让AngularFire2很容易调整到Observable的强大，那么你可以检测到Firebase端的变化，并自动更新你的用户注释。使用AngularFire2，你的解决方案看起来更像这样...
$ b rainbow.component.html

 < div> 
< ul> 
< li * ngFor =let addsnotetions $ | async> {{addsnote。$ value}}< / li> 
< / ul> 
< / div> 
  

rainbow.component.ts

 从'@ angular / core'导入{Injectable}; 
从'angularfire2'导入{AngularFire}; 
从'rxjs / Observable'导入{Observable}; 
 $ b $ export class RainbowComponent实现OnInit {
 private addsnotes $：Observable< string []> ;; 
私人用户名$：Observable< string>; 
 
构造函数（
 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）; 
 
 
 
 
 $ b $您需要异步在模板HTML中使用Observables时。它会自动订阅提取数据。与之前的代码相比，最大的区别在于，只要您的 addsnotes 数据发生变化，它就会自动在HTML视图中显示更改。如果你想保持它像之前的代码一样，你可以使用 once（'value'）来限制一次调用，你可以添加一个。将（1）加到 this.af.database.list（notesPath）的末尾，只取一次列表值。
 
 
 
另外，我建议在你的笔记里添加一个子字段，比如 order ，这样你就可以在为了你想要的。你可以找到如何与AngularFire2排序信息这里 a>。
 
 
 
希望这有助于。
 
I would like to know how to call a Firebase array using Angular 2. In my example here, I have an array addnote in my Firebase DB. There are two separate iterations of Do the dishes, and I would like to print them out to my HTML's unordered list. 

The [] in my private addsnotes throws errors, and I didn't really expect otherwise. In the absence of understanding how to output the array, I am using it to illustrate what I am trying to achieve. I have also marked the relevant area where the call is being made. 

My rainbow.component.html
<div><ul>
    <li *ngFor="let addsnote of addsnotes">{{addsnote}}</li>
</ul></div>
My firebase schema:


My 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
            });     
        }
    }
}

}

解决方案
If you want the AngularFire2 makes is easy to tune into the power of Observables so you can detect changes on the firebase end and auto-update your user notes. With AngularFire2, your solution would look more like this...

rainbow.component.html
<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);
  }
}
You will need the async pipe when using Observables in your template HTML. It will auto subscribe to extract the data. The big difference with this and the previous code is that anytime your addsnotes data changes, it will automatically show the changes on the HTML view. If you want to keep it like the previous code where you are limiting it to one call using once('value'), you can add a .take(1) to the end of this.af.database.list(notesPath) to just take the list values one time.

In addition, I would recommend adding a sub field to your notes such as order so that you can sort your list in an order that you want. You can find info on how to sort with AngularFire2 here.

Hope this helps.

                        
这篇关于使用Angular 2调用Firebase中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！