How .map / works. Subscribe to Angular2?

I am trying to populate 3 variables (arrays) from Firebase using AngularFire2.

The structure of the database is as follows:

Firebase3 Structure

I am stuck on how I allow Promise to match to populate these variables. Even the simplest queries return nothing, and console.log shows nothing.

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

I tried with .subscribe, but since this saves snapshots (and without saving it does not work), this is not feasible for me: /. But it worked and filled him.

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

Any ideas? Many thanks

+4
source share
1 answer

, , , .

, :

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. , - , , . , , . : enter image description here

:

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 

.

, , . . ? , . ? : async- :

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

:

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

Github repo Todo, , Firebase ( README) .

: enter image description here

+10

Source: https://habr.com/ru/post/1657663/


All Articles