从 Angular Firebase Firestore 数据库中获取数据

Question

我有 Angular 6，"@angular/fire": "^5.1.1", "firebase": "^5.6.0"，我正在尝试从我的数据库中获取数据，但它不起作用。

我有一个名为 getCadenaFecha() 的函数，这里我有一个逻辑，它需要任意天数并从当前日期中减去它们，然后它存储在 cadena 中以进行查询并从 firestore 获取数据，当我返回变量ultimoDia，它不获取数据

这是我的代码：

import { Injectable } from '@angular/core';
import { tempFirebaseRepo } from './../Repository/tempFirebase'
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import 'rxjs/add/operator/map';

import {Dispositivo} from './../models/Dispositivo';
import {Observable} from 'rxjs';


@Injectable({
    providedIn: 'root'
})
export class query {
    dispositivoRef:AngularFirestoreCollection<Dispositivo>;
    dispositivoRefUno:AngularFirestoreCollection<Dispositivo>;
    dispositivoRefDos:AngularFirestoreCollection<Dispositivo>;
    dispositivoRefTres:AngularFirestoreCollection<Dispositivo>;
    ultimaSemana: Observable<Dispositivo[]>;
    ultimoDia: Observable<Dispositivo[]>;

    constructor(private afs:AngularFirestore, private _tempFirebaseRepo:tempFirebaseRepo){}

    getDia(){

        let cadena=this._tempFirebaseRepo.getCadenaFecha(20)

        //aca esta la query de Firestore
        this.dispositivoRef = this.afs.collection('Dispositivo', ref =>{
            return ref.where('Dispositivo', '>', Number(cadena))
        })
        debugger;
        this.ultimoDia = this.dispositivoRef.valueChanges(); 

        return this.ultimoDia;

    }
}

....这是我的 app.module:

          import {BrowserModule} from '@angular/platform-browser';
      import {NgModule} from '@angular/core';
      import {HttpClientModule} from '@angular/common/http';
      import {ChartsModule} from 'ng2-charts';
      import {routing, appRoutingProviders} from './app.routing';
      import {environment} from '../environments/environment';
      import {AngularFirestoreModule} from '@angular/fire/firestore';
      import {AngularFireModule} from '@angular/fire';
      import { tempFirebaseRepo } from './Repository/tempFirebase';

      //componentes
      import { AppComponent } from './app.component';
      import { HeaderComponent } from './components/header/header.component';
      import { FooterComponent } from './components/footer/footer.component';
      import { SettingsComponent } from './components/settings/settings.component';
      import { MenuComponent } from './components/menu/menu.component';
      import { DataComponent } from './components/menu/data/data.component';
      import { InformeMesComponent } from './components/menu/informe/informe-mes/informe-mes.component';


      @NgModule({
        declarations: [
          AppComponent,
          HeaderComponent,
          FooterComponent,
          SettingsComponent,
          MenuComponent,
          DataComponent,
          InformeMesComponent,

        ],
        imports: [
          HttpClientModule,
          BrowserModule,
          ChartsModule,
          routing,
          AngularFirestoreModule,
          AngularFireModule.initializeApp(environment.firebase),
        ],
        providers: [
          appRoutingProviders,
          tempFirebaseRepo
        ],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

...这是我的组件，这里是订阅：

        import { Component, OnInit, Input} from '@angular/core';
    import {TemperaturaService} from '../../../services/Temperatura/Temperatura.service';
    //import {tempFirebaseService} from '../../../services/tempFirebase/temp-firebase.service';
    import {Global} from '../../../services/Temperatura/global';
    import {tempFirebaseRepo} from '../../../Repository/tempFirebase'
    import {Observable, Subject} from 'rxjs/Rx';
    import {query} from '../../../Repository/query'

    @Component({
      selector: 'app-data',
      templateUrl: './data.component.html',
      styleUrls: ['./data.component.css'],
      providers: [TemperaturaService, /*tempFirebaseService*/ ]
    })
    export class DataComponent implements OnInit {
      public data:any[];
      public url: string;
      public Chart = [];
      public dia=[];
      public mes=[];
      public year=[];
      public hora=[];
      public minuto=[];
      public medicion=[];
      public fecha=[];
      public Fecha=[];
      public lineChartData:Array<any>=[{data: [], label: ''}];
      public lineChartLabels:Array<any>=this.Fecha;
      public currentDate:number;



      constructor(
        //private _tempFirebaseService: tempFirebaseService,
        private _tempFirebaseRepo:tempFirebaseRepo,
        private _query: query
        ) { 
          this.url = Global.url;    
        }


          ngOnInit() {
            this.getDia();
          }

          //Obtener con api rest
          getDia(){
            this._query.getDia().subscribe(
              response => { 

                this.lineChartData=this._tempFirebaseRepo
                    .OrdenarResponse(response, 
                                      this.fecha, 
                                      this.medicion, 
                                      this.dia, 
                                      this.mes, 
                                      this.year, 
                                      this.hora,
                                      this.minuto, 
                                      this.Fecha,
                                      this.lineChartData
                    );

                debugger;
              },
              error =>{
                console.log(<any>error);
              }
            );
          }
          /*getSemana(){

              this._tempFirebaseService.getUltimaSemana().subscribe(
                  response => { 

                    this.lineChartData=this._tempFirebaseRepo
                        .OrdenarResponse(response, 
                                          this.fecha, 
                                          this.medicion, 
                                          this.dia, 
                                          this.mes, 
                                          this.year, 
                                          this.hora,
                                          this.minuto, 
                                          this.Fecha,
                                          this.lineChartData
                        );

                    debugger;
                  },
                  error =>{
                    console.log(<any>error);
                  }
              );

          }*/
          /* getMes(){
            this._tempFirebaseService.getUltimoMes().subscribe(
              response => { 

                this.lineChartData=this._tempFirebaseRepo
                    .OrdenarResponse(response, 
                                      this.fecha, 
                                      this.medicion, 
                                      this.dia, 
                                      this.mes, 
                                      this.year, 
                                      this.hora,
                                      this.minuto, 
                                      this.Fecha,
                                      this.lineChartData
                    );

                debugger;
              },
              error =>{
                console.log(<any>error);
              }
          );
          }*/

          // lineChart
        public lineChartOptions:any = {
            responsive: true
          };

          public lineChartColors:Array<any> = [
            { // grey
              backgroundColor: 'rgba(148,159,177,0.2)',
              borderColor: 'rgba(148,159,177,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)'
            },
            { // dark grey
              backgroundColor: 'rgba(77,83,96,0.2)',
              borderColor: 'rgba(77,83,96,1)',
              pointBackgroundColor: 'rgba(77,83,96,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(77,83,96,1)'
            },
            { // grey
              backgroundColor: 'rgba(148,159,177,0.2)',
              borderColor: 'rgba(148,159,177,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)'
            }
          ];
          public lineChartLegend:boolean = true;
          public lineChartType:string = 'line';

          // events
          public chartClicked(e:any):void {
            console.log(e);
          }

          public chartHovered(e:any):void {
            console.log(e);
          }
    }

....响应总是空的

....这是我的数据库：

Answer 1

您将ultimoDia 设置为可观察对象，然后从不订阅它。阅读observables and subscriptions，你就会明白为什么你的代码不工作了。基本上，您是在说“这是我想听的数据”，但实际上您从未真正开始听。

您的错误很常见 - AngularFire2 文档对于不熟悉 observables/subscriptions 的人来说太可怕了。添加.subscribe() 以查看您的数据，例如：

return this.dispositivoRef.valueChanges().subscribe(queriedItems => {
    console.log(queriedItems);
    return queriedItems;
});

*未经测试的代码