Save in global variable list of firebase documents to display in the console, in angular

Question

I'm making a to-do list app

I need to keep an up-to-date to-do list in the global const array.

I found this array in the constructor, output it to HTML {{ todo.name }}, everything works fine, but

I can't output this to the console, and don't understand what is in the array instead, what am I doing wrong? Thanks.

import { Component, ViewChild, ElementRef, OnInit, NgZone } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { formatDate } from "@angular/common";

export interface Todo {
    name: string;
    isDone: boolean;
    priority: string;
    creationDate: any;
    creationTime: any;
    id: string;
}

@Component({
    selector: 'app-todo-list',
    templateUrl: './todo-list.component.html',
    styleUrls: ['./todo-list.component.sass']
})

@Injectable()

export class TodoListComponent {
    userData: any; // Save logged in user data
    inputValue: string = '';

    listTodos: AngularFirestoreCollection<Todo>;
    itemDoc: AngularFirestoreDocument<Todo>;

    items: Observable<Todo[]>; // All Todo
    todosHigh: Observable<Todo[]>; // Category

    public now: Date = new Date();

    constructor(
        public afs: AngularFirestore,
        public authService: AuthService,
        public afAuth: AngularFireAuth, // Inject Firebase auth service
    ) {
        this.afAuth.authState.subscribe(user => {
            if (user) {
                this.userData = user;
                localStorage.setItem('user', JSON.stringify(this.userData));
                JSON.parse(localStorage.getItem('user'));

                const dataDay = formatDate(this.now, 'ddMMyyyy', 'en-US');
                const userId = this.userData.uid;

                this.listTodos = afs.collection<Todo>('users').doc(userId)
                        .collection<Todo>('todo-list');

                // All todo
                this.items = this.listTodos.doc('todoDay_' + dataDay)
                        .collection<Todo>('todo-daily').valueChanges();

                // High category todo
                this.todosHigh = this.listTodos.doc('todoDay_' + dataDay)
                        .collection<Todo>('todo-daily', ref => ref
                            .where('priority', '==', 'high')).valueChanges();

                console.log(this.todosHigh); // This dont work

            } else {
                localStorage.setItem('user', null);
                JSON.parse(localStorage.getItem('user'));
            }
        })
    }

    // Example f for show todo array
    showList() {
        const dataDay = formatDate(this.now, 'ddMMyyyy', 'en-US');
        const userId = this.userData.uid;
        // All todo
        this.items = this.afs.collection<Todo>('users')
                .doc(userId)
                .collection<Todo>('todo-list')
                .doc('todoDay_' + dataDay)
                .collection<Todo>('todo-daily')
                .valueChanges();
        console.log(this.items); // This dont work
    }

}

Now the console looks like this:

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator: MapOperator {project: ƒ, thisArg: undefined}
source: Observable {_isScalar: false, _subscribe: ƒ}
_isScalar: false
__proto__: Object

Thank!

Answer 1

As of the docs from angularfire2, not sure if you use it, valueChanges() returns an Observable. That is what your console output says. It prints information about the Observable. angularfire2 docs

To resolve the Observable you need to subscribe to it.