使用 Angular 2 在 Firebase 中调用数组

Question

我想知道如何使用 Angular 2 调用 Firebase 数组。在我的示例中，我的 Firebase 数据库中有一个数组 addnote。 Do the dishes 有两个单独的迭代，我想将它们打印到我的 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 可以轻松调整到 Observables 的强大功能，以便您可以检测到 Firebase 端的更改并自动更新您的用户注释。使用 AngularFire2，您的解决方案看起来更像这样......

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

在模板 HTML 中使用 Observables 时，您将需要 async 管道。它将自动订阅以提取数据。这段代码和之前的代码最大的不同在于，只要你的addsnotes 数据发生变化，它就会自动在 HTML 视图上显示变化。如果您想保持它像之前的代码一样使用once('value') 将其限制为一次调用，您可以在this.af.database.list(notesPath) 的末尾添加一个.take(1)，以便只获取列表值一次。

此外，我建议在您的笔记中添加一个子字段，例如order，以便您可以按照您想要的顺序对您的列表进行排序。您可以找到有关如何使用 AngularFire2 here 进行排序的信息。

希望这会有所帮助。

Answer 2

如果您想坚持使用 Web Firebase API（没有 angularfire2），以使 addsnotes 工作，它可能看起来像这样。

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