保存在 firebase 文档的全局变量列表中，以在 angular 中显示在控制台中

Question

我正在制作一个待办事项列表应用程序

我需要在全局常量数组中保留一个最新的待办事项列表。

我在构造函数中找到了这个数组，输出到HTML{{ todo.name }}，一切正常，但是

我无法将其输出到控制台，也不明白数组中的内容，我做错了什么？谢谢

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
    }

}

现在控制台看起来像这样：

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

谢谢！

Answer 1

根据 angularfire2 的文档，不确定您是否使用它，valueChanges() returns 一个 Observable。这就是您的控制台输出所说的。它打印关于 Observable 的信息。 angularfire2 docs

要解析 Observable，您需要订阅它。

保存在 firebase 文档的全局变量列表中，以在 angular 中显示在控制台中

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

firebase

angularfire2

angular