0

Estou desenvolvendo uma aplicação em angular, e preciso ler os dados gravados no meu realtime database do firebase.

inserir a descrição da imagem aqui

Como eu faria para ler todos os dados que estão dentro do objeto 9 por exemplo ? Preciso ler esses dados e gravá-los em variáveis, para que eu possa compará-los com outros valores.

Segue o código do meu component.ts:

    import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { QuestionarioService } from 'src/app/providers/questionario.service';
import { MenuService } from 'src/app/providers/menu.service';
import { FirebaseService } from 'src/app/modules/utils/providers/firebase.service';
import { SessionService } from 'src/app/modules/utils/providers/session.service';
import { Http, Response } from '@angular/http'; 

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

export class QuestionarioComponent implements OnInit {

 firebase:any;

 valorR:number = 0;
 valorG:number = 0;
 valorB:number = 0;
 valorA:number = 0;
 valorS:number = 0;
 valorI:number = 0;

  constructor(public questionario:QuestionarioService,
  public menu:MenuService,
  public dialog: MatDialog,
  public session: SessionService,
  private http: Http) {
    this.firebase = new FirebaseService();
   }


  ngOnInit() {
  window.scrollTo(0,0);

  let url = ''
  this.http.get( url )
     .pipe( (data: Response) => data.json() ) /* Necessário converter para JSON */
     .subscribe( answers => console.log( answers ) ); 
  }



  getRadioValorR(event){
    if(event.value > this.valorR){
      this.valorR = event.value;
      }
    }


  getRadioValorB(event){
    if(event.value > this.valorB){
      this.valorB = event.value;
    }
  }

  getRadioValorA(event){
    if(event.value > this.valorA){
      this.valorA = event.value;
    }
  }
  getRadioValorS(event){
    if(event.value > this.valorS){
      this.valorS = event.value;
    }
  }

  getRadioValorI(event){
    if(event.value > this.valorI){
      this.valorI = event.value;
    }
  }

  derteminaG(){
    this.valorG = this.valorR;
    if(this.valorG < this.valorB){
      this.valorG = this.valorB;
    }
    if(this.valorG < this.valorA){
      this.valorG = this.valorA;
    }
    if(this.valorG < this.valorS){
      this.valorG = this.valorS;
    }
    if(this.valorG < this.valorI){
      this.valorG = this.valorI;
    }
   return this.valorG;
  }

  getClass0(){
    if(this.derteminaG() == 0){
      return true;
    }

  }
  getClass1(){
    if(this.derteminaG() == 1){
      return true;
    }
  }
  getClass2(){
    if(this.derteminaG() == 2){
      return true;
    }
  }
  getClass3(){
    if(this.derteminaG() == 3){
      return true;
    }
  }

    Desabilitar(element){
    var radio = document.getElementById(element) as HTMLInputElement;
    if(radio.style.display == 'none'){
      radio.style.display = 'table-cell';
    }else radio.style.display = 'none';
  }



}

2 Respostas 2

0

Pra isso você precisa utilizar o modulo Http do angular para fazer uma requisição para sua tabela no firebase e assim extrair o valor desejado.

Primeiro passo: importar o módulo Http dentro do seu app.module.ts

/* app.module.ts*/

import { HttpModule } from '@angular/http';


...

imports[
  ...
  HttpModule      /* Adicionar o HttpModule dentro de imports */
]

Segundo passo: Importar o Http dentro do componente que quer fazer a requisição e iniciar setup

Leia os comentários no código para entender cada passo

...

import { Http, Response } from '@angular/http'; 
/* Importa o Http e também o tipo Response */

constructor( private http: Http) {} // Adicione o módulo ao seu constructor

ngOnInit() {
     /* O método GET retorna os dados da sua requisição */
     /* Você precisa passar a URL do seu banco de dados no Firebase como parametro*/

     /* As URLs do Firebase geralmente tem esse formato: 
      *  https://nomeprojeto-18e6c.firebaseio.com/recipes.json
      */

    let url = 'https://nomeprojeto-18e6c.firebaseio.com/nomebanco.json'
     this.http.get( url )
     .pipe( (data: Response) => data.json() ) /* Necessário converter para JSON */
     .subscribe( answers => console.log( answers ) ); 

     /* console.log imprimirá sua tabela com os objetos 9, 10, 11*/
}

INFORMAÇÕES IMPORTANTES NO SEU CONTEXTO

Dentro do subscribe você pode atribuir o valor retornado para uma variável.

Vou adicionar uma propriedade acima do construsctor para ilustrar o que pode ser feito.

...

import { Http } from '@angular/http'; /* Importa o Http */



Answers: any; /* VARIÁVEL NOVA */
constructor( private http: Http) {} // Adicione o módulo ao seu constructor

ngOnInit() {
     /* O método GET retorna os dados da sua requisição */
     /* Você precisa passar a URL do seu banco de dados no Firebase como parametro*/

     /* As URLs do Firebase geralmente tem esse formato: 
      *  https://nomeprojeto-18e6c.firebaseio.com/recipes.json
      */

    let url = 'https://nomeprojeto-18e6c.firebaseio.com/nomebanco.json'
     this.http.get( url )
     .pipe( data => data.json() ) /* Necessário converter para JSON */
     .subscribe( answers => {
         this.answers = answers 
     }); 

     /* console.log imprimirá sua tabela com os objetos 9, 10, 11*/
}
14
  • Se eu quiser retornar apenas o objeto 9 por exemplo, basta eu trocar answers por 9 ? 16/11/2018 às 19:52
  • Como o retorno será um objeto você pode acessar através da chave do objeto. Nesse caso, this.answers.9.
    – Beto Silva
    16/11/2018 às 19:54
  • O seguinte erro foi retornado após eu inserir seu código : "message": "A propriedade 'json' não existe no tipo 'Observable<Response>'. 16/11/2018 às 19:59
  • Não está funcionando :/ 16/11/2018 às 20:05
  • Tá, na linha onde tem .pipe( data => data.json() ) substitua por isso: .pipe( (data:any) => data.json() ) O correto é adicionar o tipo response no retorno, mas vou atualizar o código com mais calma em breve
    – Beto Silva
    16/11/2018 às 20:05
0

Utilize na sua função :

  var key: string;
  return new Promise((resolve, reject) =>{
  return this.db.object("9" + key).snapshotChanges()
  .map(c => {
    return { key: c.key, ...c.payload.val() };
  });
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .