angular - 使用 Observables 从 Firebase 错误中检索数据

Question

我正在使用 Firebase 进行我的第一个项目，但我被卡住了。

我正在尝试从 Firebase 数据库上的“新闻”节点检索所有数据，但我不能。它什么也没给我。我还测试了使用异步管道来解开可观察对象，但这给了我一个管道错误。有人可以帮忙吗？

这是我的数据库的屏幕截图

服务.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;
    }
}

组件.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>

标签： angularfirebasefirebase-realtime-databaseobservableangularfire