Question

我正在尝试使用AngularFire2从Firebase填充3个变量（数组）。

DB结构是这样的：

我陷入困境，我应该如何解决Promise来映射以填充这些变量。即使是最简单的查询也不会返回任何内容，并且console.log也不会显示任何内容。

    let testConnection = this.AngularFire.database.list(DbPath)
          .map((items) => {
            console.log(items);
            return items.map(item => {
                console.log(items);
                 console.log(item);
   })})

我尝试使用.subscribe，但由于这会保留快照（并且不保留它不起作用），因此对我来说不可行：/。但它起作用并填补了它。

return this.AngularFire.database.list(DbPath, { preserveSnapshot: true })
.subscribe(
(snapshots:any) => {
    snapshots.forEach(snapshot => {
    console.log(snapshot.key);

       if (snapshot.key === 'disliked') {
       this.dataListDisliked = snapshot.val();
   }
   ...

有什么想法吗？非常感谢

Answer 1

我希望我能回答你的问题，因为我不知道我是否理解正确。

所以这段代码：

let testConnection = this.AngularFire.database.list(DbPath)
  .map((items) => { //first map
    console.log(items);
    return items.map(item => { //second map
      console.log(items);
      console.log(item);
    })
  })

我将尝试为您分解，Angular Firebase使用observable，因此当您创建一个列表对象时，它会返回一个Observable。因此，您的第一个映射是来自observable的函数，它允许您在每次observable发出值时映射函数。所以基本上你的第一张地图会在你的清单每次更改时运行。看看这个Todos列表：

现在这是一个非常简单的应用程序组件：

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import 'rxjs/add/operator/map'; // you might need to import this, or not depends on your setup

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  text = '';
  todos: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.todos = <FirebaseListObservable<any>> af.database.list('Todos').map(items => { //first map
          return items.map(item => { //second map
            item.text = item.text.toUpperCase();
            return item;
          })
        });
  }

  addTodo() {
    this.todos.push({
      text: this.text,
      completed: false
    });
    this.text = '';
  }

  changeTodo(key: string, completed){
    this.todos.update(key, {completed: !completed});
  }
}

代码很简单，唯一可能令人困惑的是这一行：

<FirebaseListObservable<any>> af.database.list('Todos').map(items

您可以在此answer

中详细了解相关内容

现在，如果您按原样运行我们的应用程序，则不会发生任何事情。什么都不会记录到我们的控制台。为什么？好吧，因为没有订阅我们的Todos观察。我们如何订阅？我们有两种方法，在视图上使用异步管道：

<li *ngFor="let todo of todos | async" [ngClass]="{completed: todo.completed}" (click)="changeTodo(todo.$key, todo.completed)">
    {{ todo.text }}
  </li>

或者在我们的组件上手动订阅我们的Observable：

this.todos.subscribe(todos => {
  //now we can assign our todos to a variable
  this.ourTodoList = todos;
});

我使用这个非常基本的Todo应用创建了一个简单的Github repo，如果您希望可以克隆它，指向您的Firebase数据库（所有说明都在README文件中）并在您的本地机器上运行。

这是应用程序的外观：

Angular2上的.map / .subscribe是如何工作的？

1 个答案: