Odtnhj

I'm working on my first project with Firebase but I'm stuck.

I'm trying to retrieve all the data from the "news" node on my Firebase DB and I can't. It gives me nothing. I've also tested using the async pipe to unwrap the observable but that gives me a pipe error. Can someone help?

Here is a screenshot of my DB

service.ts

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) 
 this.news = db.list('news');
 
 getNews() 
 return this.news;
 

component.ts

import map from 'rxjs/operators';
import ActivatedRoute from '@angular/router';
import News from './news.model';
import Component, OnInit from '@angular/core';
import Title from '@angular/platform-browser';
import NewsService from './news.service';

@Component(
 selector: 'app-news',
 templateUrl: './news.component.html',
 styleUrls: ['./news.component.css']
)
export class NewsComponent implements OnInit 
 news: any;
 constructor(private _titleService: Title, private newService: NewsService,
 private route: ActivatedRoute) 
 

 ngOnInit() 
 this._titleService.setTitle('News');
 this.news = this.newsService.getNews();
 // this.route.params.subscribe(
 // () => 
 // this.newService.getNews();
 // 
 // );
 

html

<app-subheader></app-subheader>

<div class="container top-space">
 <div class="row">
 <div class="col-sm-12 col-lg-4" *ngFor="let item of news">
 <div class="card" style="width: 18rem;">
 <img class="card-img-top" src="#">
 <div class="card-body">
 <h5 class="card-title"> item.title </h5>
 <span> item.subtitle </span>
 </div>
 <div class="card-footer">
 <a href="#" class="btn btn-primary"><i class="far fa-eye"></i></a>
 </div>
 </div>
 </div>
 </div>
</div>