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返回的内容。您正在尝试为EventModel[]分配一个Observable。可观察对象不是数组，但它们可以发出数组。 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();
  }

AngularFire2可以观察到类型特定的对象

1 个答案: