AngularFire2获取类型特定对象的Observable

Question

我正在使用 Angular 和 Firebase 进行我的第一个项目。即使你一切正常，我还有一个关于获取特定类型对象的问题。例如，我有一个服务，它有一个名为 getAllNews() 的方法，但我希望这个返回是一个 News 类型（由我创建，有一个 NewsModel 文件）但是当我设置类型时，我从 TSLint 得到这个： [ts] Type 'Observable<{}[]>' is not assignable to type 'EventModel[]'. Property 'length' is missing in type 'Observable<{}[]>

有人可以在这里为我点亮一盏灯吗？非常感谢！

这是我的代码：

newsService.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { News } from '../news/news.model';
@Injectable({
  providedIn: 'root'
})
export class NewsService {

  NODE = 'news/';
  news: AngularFireList<News[]>;

  constructor(private db: AngularFireDatabase) { }

  getAllNews() {
    const localNews = this.db.list(this.NODE);
    return localNews.valueChanges();
  }

  getNews(id: string) {
    return this.db.object(this.NODE + id);
  }
}

news.model.ts

export class News {
    id: string;
    title: string;
    subtitle: string;
    article: string;
    picture: string;
}

news.component.ts

import { News } from './news.model';
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../services/news.service';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-news',
  templateUrl: './news.page.html',
  styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {

  news: any;

  constructor(private newsService: NewsService, private router: Router, private navController: NavController) { }

  ngOnInit() {
    this.news = this.newsService.getAllNews();
  }

  go(id: string) {
    this.navController.navigateForward('news/' + id);
  }
}

---

Answer 1

您需要明确键入从AngularFireDatabase 返回的内容。您正在尝试将 Observable 分配给 EventModel[]。 Observables 不是数组，但它们可以发出数组。 Observable 的隐式输入是 {}。

我不明白EventModel[] 输入的来源。这几乎就像 news.component.ts 上的 news: any 最初是 news: EventModel[] 而 Intellisense 正在滞后。无论哪种方式，请尝试：

  getAllNews() {
    const localNews = this.db.list<News>(this.NODE); // now should return Observable<News[]>
    return localNews.valueChanges();
  }

在 news.component 中：

  news: Observable<News[]>;

  constructor(private newsService: NewsService, private router: Router, private navController: NavController) { }

  ngOnInit() {
    this.news = this.newsService.getAllNews();
  }