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

Question

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

数据库结构是这样的：

我不知道应该如何解决 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 使用可观察对象，因此当您创建一个列表对象时，它会返回一个可观察对象。因此，您的第一个映射是来自可观察对象的函数，它允许您在每次可观察对象发出值时映射一个函数。所以基本上你的第一张地图会在每次你的列表发生变化时运行。看看这个待办事项列表：

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

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 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 文件中）并在你的本地机器上运行。

这是应用程序的外观：