Angular 4 - Subscribe ist kein Funktionsfehler

Question

Ich versuche, eine Observable von einem Dienst zu abonnieren, baut es ohne Fehler, aber ich bekomme den Fehler "this.service.getBanners (...). Subscribe ist keine Funktion "bei der Anzeige im Browser.

Service:

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 

@Injectable() 

export class BannerService { 

    banners: any = ['1','2','3']; 

    constructor(
    ) {} 

    getBanners(): Observable<any[]> { 
     return this.banners; 
    } 

    setBanners(banners: any[]): void { 
     this.banners = banners; 
    } 

} 

Komponente:

import { Component, ViewEncapsulation, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { BannerService } from './../banner/banner.service'; 

@Component({ 
    selector: '.banner', 
    templateUrl: './banner.component.html', 
    styleUrls: ['./banner.component.sass'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class BannerComponent implements OnInit { 

    banners: any[]; 

    constructor(private bannerService: BannerService){ 

    } 

    ngOnInit() { 
     this.bannerService.getBanners().subscribe(banners => this.banners = banners); 
    } 
} 

Alle Ideen, was ich falsch mache?

Answer 1

Sie sollten eine beobachtbare zurückkehren, anstatt kehren Sie ein Array,

getBanners(): Observable<any[]> { 
    return Observable.of(this.banners); 
} 

Answer 2

Ein paar Dinge zu beheben.

1. Sie deklarieren, dass Ihre Funktion getBanners() ein Observable zurückgibt, aber Sie ein Array zurückgeben. So ändern Sie Ihre return-Anweisung zu

   return Observable.from(this.banners);

Sie werden auch diese hinzufügen müssen:

import 'rxjs/add/observable/from'; 

2. Dies ist eine schlechte Praxis und wird Schließen Sie die gesamte rxjs-Bibliothek in Ihren Code ein:

   import { Observable } from 'rxjs';

Importieren Sie nur, was Sie benötigen. Ersetzen Sie die obigen mit

import { Observable } from 'rxjs/Observable';