todoapp.component.ts

import { Component, OnInit } from '@angular/core';
import {AfireService} from '../afire.service';

import {Observable} from 'rxjs';
//angular 5: import {Observable} from "rxjs/Observable";

import {map} from 'rxjs/operators';
//angular 5: import 'rxjs/add/operator/map';

@Component({
  selector: 'app-todoapp',
  templateUrl: './todoapp.component.html',
  styleUrls: ['./todoapp.component.css']
})
export class TodoappComponent implements OnInit {

  todos: Observable<any>;

  todo: string;

  constructor(public aFireService: AfireService) { }

  ngOnInit() {
    /**
      angular 5
      this.todos = this.aFireService.all().snapshotChanges().map(todoSnap => {
        return todoSnap.map(todo => {
          return todo.payload.doc.data();
        })
      })
    */
    
    //v6
    this.todos = this.aFireService.all().snapshotChanges().pipe(
      map(todoSnap => {
        return todoSnap.map(todo => {
          return todo.payload.doc.data();
        })
      }));
  }

}