Ndtyjky

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>

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.