Retrieve single object Firebase Angular

Question

I'm working on this application but I'm having problems retrieving the object's entire information.

I have a "news" page that will display all the lists from the DB, that one is working fine, when you click on the news, it will take you to the "details" page, I can do the routing, no problem.

The issue is that I can't get the data from Firebase. What am I doing wrong?

Thanks

Component:

import { ActivatedRoute, Params, Router } from '@angular/router';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NewsService } from '../news.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class NewsDisplayComponent implements OnInit {
  @ViewChild('closeBtn') closeBtn: ElementRef;
  id;

  news: Observable<any>;

  constructor(private db: AngularFireDatabase, private route: ActivatedRoute, private newsService: NewsService, private router: Router) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.news = this.newsService.getSingleNews(this.id).valueChanges();
    console.log(this.news);
  }

  closeModal() {
    this.router.navigate(['/news']);
    this.closeBtn.nativeElement.click();
  }

}

Service.ts

import { map } from 'rxjs/operators';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { News } from './news.model';
import { Injectable } from '@angular/core';

@Injectable()
export class NewsService {
    news: AngularFireList<News[]>;
    constructor(private db: AngularFireDatabase) {
    }
    getNews() {
        this.news = this.db.list('news');
        return this.news.valueChanges();
    }

    getSingleNews(id: string) {
        return this.db.object('news' + id);
    }
}

HTML

<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">{{ id }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" #closeBtn (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h1>{{ news.title | async }}</h1>
        <h2>{{ news.subtitle | async }}</h2>
        <p>{{ news.article | async}}</p>
      </div>
    </div>
</div>

ams · Accepted Answer · 2018-11-18 21:49:19Z

3

Try it like this:

Component

this.newsService.getSingleNews(this.id).subscribe(news => {
    this.news = news
});

Service.ts

It seems like you're missing a slash after news.

getSingleNews(id: string) {
    return this.db.object('news/' + id);
}

Update:

Change news: Observable<any> property to an object. If you do it the way I showed you it isn't an observable anymore.

edited Nov 18, 2018 at 21:49

answered Nov 15, 2018 at 23:45

ams

4495 silver badges11 bronze badges

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

4 Comments

MrRobot Over a year ago

Hey ams. Thanks! I didn't work. I got the samething. Nothing shows. :(

ams Over a year ago

Have you changed the news: Observable<any> property to an object? because if you do it the way I showed you it isn't an observable anymore. Also what does the data news from the subscription show when you console.log it.

ams Over a year ago

@iconio Nice to hear! Could you mark my answer as the correct one, so that other people in the future with the same problem will see that this solution works?

joey8oro Over a year ago

For me, the getSingleNews() method needs to return this.db.object('news/' + id).valueChanges();

Collectives™ on Stack Overflow

Retrieve single object Firebase Angular

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related