Firebase and Angular2

Question

all right?

I don’t know what’s left to get the answer from Firebase using Angular2. I followed a tutorial that worked, but when trying in my project, I get 'null'. I don’t know if I use Firebaseobjectobservable or Firebaselistobservable. Well, let’s go to the code.

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');
  }
}

And my 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>

And a picture of how I set up my firebase

I’m waiting for a little help from some guru! A hug!

I edited a part of the component code for:

  constructor(af: AngularFire) {

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

And now on the console I have:

I mean, I’m getting to Firebase, but something is missing, because I don’t understand these Object that should be marca_1, marca_2, marca_3 and marca_4 according to the structure of my bank...

Answer 1

My collection at firebase

My component

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);
  }
}

My View

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