L'abonnement n'est pas une erreur de fonction

Question

J'essaye de m'abonner à un observable d'un service, il se construit sans erreur mais j'obtiens l'erreur "this.service.getBanners (...). Subscribe n'est pas une fonction" lors de la visualisation dans le navigateur.

Un 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;
    }

}

Composant:

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);
    }
}

Des idées sur ce que je fais mal?

Answer 1

Vous devez retourner un observable, au lieu de cela, vous retournez un tableau:

Pour Angular <= 5.x.x

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

Pour Angular> = 6.x.x

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

Référence

Answer 2

Quelques choses à corriger.

1. Vous déclarez que votre fonction getBanners () renvoie un Observable, mais vous retournez un tableau. Modifiez donc votre déclaration de retour en

   return Observable.from(this.banners);

Vous devrez également ajouter ceci:

import 'rxjs/add/observable/from'; 

2. C'est une mauvaise pratique et inclura la bibliothèque rxjs entière dans votre code:

   import { Observable } from 'rxjs';

Importez uniquement ce dont vous avez besoin. Remplacez ce qui précède par

import { Observable } from 'rxjs/Observable';