webentwicklung-frage-antwort-db.com.de

Abonnieren ist kein Funktionsfehler

Ich versuche, ein Observable von einem Dienst zu abonnieren. Es wird fehlerfrei erstellt, aber beim Anzeigen im Browser wird der Fehler "this.service.getBanners (...). Subscribe ist keine Funktion" angezeigt.

Bedienung:

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

Irgendwelche Ideen, was ich falsch mache?

angularangular-servicesangular-observable
19
Steve

Sie sollten ein Observable zurückgeben, stattdessen geben Sie ein Array zurück:

Für Angular <= 5.x.x 

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

Für Angular> = 6.x.x 

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

Referenz

26
Sajeetharan

Ein paar Dinge zu beheben.

  1. Sie deklarieren, dass Ihre Funktion getBanners () ein Observable zurückgibt, aber Sie geben ein Array zurück. Ändern Sie also Ihre Rückgabeerklärung in

    return Observable.from(this.banners);

Sie müssen auch Folgendes hinzufügen:

import 'rxjs/add/observable/from';

  1. Dies ist eine schlechte Praxis und schließt die gesamte rxjs-Bibliothek in Ihren Code ein:

    import { Observable } from 'rxjs';

Importieren Sie nur das, was Sie brauchen. Ersetzen Sie die oben genannten durch

import { Observable } from 'rxjs/Observable';
7
Yakov Fain