Accessing Firebase list values with Angular 2 and AngularFire

Question

So far I've been able to migrate my CRUD app to Firebase. I can list, create and delete news. I'm struggling with edit though.

This is the edit component. It takes a snapshot of the route params which is equal to the $key value of that particular news in Firebase. Then I concatenate it to the database listing:

import { Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app-edit-news',
  templateUrl: 'edit-news.component.html',
  styleUrls: ['edit-news.component.css']
})
export class EditNewsComponent {
  noticia: FirebaseListObservable<any>;

  constructor(
    private route: ActivatedRoute,
    private af: AngularFire) { 
      this.news = af.database.list('news/'+this.route.snapshot.params['id']);
    }

}

I'm new to observables but I thought with this I could be able to access the concrete object of the database using interpolation such us {{news.title}} Obviously, I'm wrong. Any help?

Could you please provide the part of your template where you are using news observable? I have a feeling that you haven't added async pipe to your ngfor call. For example *ngFor="let item of items | async" — Yevgeniy.Chernobrivets
– Yevgeniy.Chernobrivets, Commented Aug 6, 2016 at 16:26
@Yevgeniy.Chernobrivets There's no iteration for this one. It's just a form that takes several news values from the database inside inputs with [(ngModel)]="news.foo" and you can edit them and save the changes. The interpolation I mentioned was just an example of accessing the values. — cerealex
– cerealex, Commented Aug 6, 2016 at 17:42

Rob Gorman · Accepted Answer · 2016-08-06 18:20:49Z

3

In the html template for EditNewsComponent use

{{(news | async)?.title}}    // you don't need '?' if it can't be null

Probably also you need to change

this.news = af.database.list('news/'+this.route.snapshot.params['id']);

to

this.news = af.database.object('news/'+this.route.snapshot.params['id']);

so that you are accessing an object and not a list.

edited Aug 6, 2016 at 18:20

answered Aug 6, 2016 at 18:09

Rob Gorman

3,8045 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cerealex Over a year ago

Yeah... I changed it to object. My mistake. But the problem is still there. How do you bind those object values to input nodes with [(ngModel)] instead of using interpolation syntax? I need to be able to edit and save the existing news after all. Thx!

Manohar Gavit · Accepted Answer · 2017-10-07 05:03:43Z

0

use this syntax

noticia: firebaseListObservable<any[]>;
constructor(private db: AngularFireDatabase,public af:AngularFireAuth) {
     this.noticia = db.list('/news',{
       query: {
          orderByChild:'id'
              }
     });
   }

edited Oct 7, 2017 at 5:03

answered Oct 7, 2017 at 4:29

Manohar Gavit

6924 silver badges16 bronze badges

Collectives™ on Stack Overflow

Accessing Firebase list values with Angular 2 and AngularFire

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related