0

tudo bem?

Não sei o que falta para obter a resposta do Firebase usando o Angular2. Segui um tutorial que deu certo, mas ao tentar em meu projeto, recebo 'null'. Não sei se uso FirebaseObjectObservable ou FirebaseListObservable. Bom, vamos ao código.

import { Component } from '@angular/core';
import { AngularFire, FirebaseObjectObservable  } from 'angularfire2';

@Component({
  selector: 'app-marcas',
  templateUrl: './marcas.component.html'
})

export class MarcasComponent {
    meufirebase: FirebaseObjectObservable<any[]>;
    constructor(af: AngularFire) {
    this.meufirebase = af.database.object('/marcas/marca_1/nome');
  }
}

E meu html:

<label>Escolha a marca</label>
<select materialize="material_select" [materializeSelectOptions]="marcas" class="browser-default">
  <option  *ngFor="let marca of marcas">{{ marcas.nome }}</option>
</select>

E uma imagem de como montei meu Firebase

inserir a descrição da imagem aqui

No aguardo de uma mãozinha de algum guru! Um abraço!

Editei uma parte do código do componente para:

  constructor(af: AngularFire) {

    const queryObservable = af.database.list('/marcas', {
      query: {
        orderByChild: 'nome'
      }
    });
    // subscribe to changes
    queryObservable.subscribe(queriedItems => {
      console.log(queriedItems);  
    });
  }
}

E agora no console tenho:

inserir a descrição da imagem aqui

Ou seja, estou chegando até o Firebase, mas falta algo ainda, pois não entendo esses Object que deveriam ser marca_1, marca_2, marca_3 e marca_4 conforme a estrutura do meu banco...

3
  • Verifique se você colocou seu banco de dados quando o criou com o país Brasil ... em um que selecionei Brasil, não funcionou. Tive que criar outro e colocar EUA.
    – duardbr
    Commented 27/11/2016 às 6:50
  • Sério? Vou tentar, mas acho que a solução é pouco provável. Commented 27/11/2016 às 11:54
  • Como pensei, não mudou nada. Mas obrigado por sua resposta! Commented 27/11/2016 às 12:07

1 Resposta 1

1

Minha coleção no firebase

inserir a descrição da imagem aqui

Meu componente

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  marcas: FirebaseListObservable<any []>;

  constructor(private af: AngularFire) {
    this.marcas = af.database.list('/Marcas');
    console.log(this.marcas);
  }
}

Minha View

<h1>
  {{title}}
</h1>
<hr>
<ul>
  <li *ngFor="let marca of marcas | async">
    {{marca.$key}} {{ marca.name}}
  </li>
</ul>

inserir a descrição da imagem aqui

2
  • YES!!!! YOU ARE THE MAN! Valeu mesmo amigão! Descobri que confundi no *ngFor= "let marca of marcas", eu estava chamando {{ marcaS.nome }} em vez de {{marcA.nome }} Agora vou ver como colcoar esse reultado dentro de um select box com a diretiva materialize. Commented 27/11/2016 às 14:00
  • Beleza... foi mais fácil do que imaginei. Já tenho dois select lendo do firebase. Agora, vc saberia me dizer como fazer com que o segundo select, que é de modelos, correspondam somente à uma única marca? Por exemplo: Agora estou trazendo Todas as marcas no primeiro select. Mas ao selecionar VW, gostaria que o select modelos só trouxessem modelos da VW, entende? Commented 27/11/2016 às 15:23

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 .