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

Question

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

数据库结构是这样的：

我不知道应该如何解决 Promise to map 以填充这些变量。即使是最简单的查询 return 也没有，而且 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 使用可观察对象，因此当您创建列表对象时，它 returns 是一个可观察对象。所以你的第一个映射是一个来自可观察对象的函数，它允许你在每次可观察对象发出一个值时映射一个函数。所以基本上每次您的列表发生变化时，您的第一张地图都会运行。看看这个待办事项列表：

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

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

您可以在此

中阅读更多相关信息

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

<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 如何工作？

How does .map / .subscribe on Angular2 work?

firebase

firebase-realtime-database

ionic2

angularfire2

angular