AngularFire2 Получение Observable объекта определенного типа - PullRequest
Новая
       8

AngularFire2 Получение Observable объекта определенного типа

0 голосов
/ 11 декабря 2018

Я работаю над своим первым проектом с использованием 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);
  }
}

1 Ответ

0 голосов
/ 12 декабря 2018

Вам нужно явно ввести то, что возвращается из AngularFireDatabase.Вы пытаетесь присвоить Observable EventModel[].Наблюдаемые не являются массивами, но они могут излучать массивы.Неявная типизация для Observable - {}.

Что я не понимаю, так это откуда берется EventModel[].Похоже, что news: any на news.component.ts изначально 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();
  }
...