Abonnieren ist nicht ein Fehler einer Funktion

Ich versuche zu abonnieren, um eine observable, die von einem Dienst, baut es ohne Fehler aber ich bekomme die Fehlermeldung "diese.service.getBanners(...).abonnieren ist nicht eine Funktion" beim anzeigen 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);
    }
}

Irgendwelche Ideen was ich falsch mache?

InformationsquelleAutor Steve | 2017-08-15

  1. 15

    Sollten Sie wieder eine beobachtbare , sondern Sie sind der Rückgabe ein array,

    getBanners(): Observable<any[]> {
    return Observable.of(this.banners);
}
    Danke, dies den Fehler behoben. Ich habe auch die Importe wie empfohlen von Yakov Fain in seiner Antwort, und importiert import 'rxjs/add/beobachten/' zu. Ich habe eine *ngFor mit einem async-Rohr, aber es wird nicht aktualisiert, wenn ich rufe setBanners und ändern Sie den Inhalt der Banner-array.

    InformationsquelleAutor Sajeetharan

  2. 5

    Ein paar Dinge zu beheben.

    1. Erklären Sie, dass Sie Ihre Funktion getBanners() gibt eine Beobachtbare, aber Sie gibt ein array zurück. So ändern Sie Ihren return-Anweisung, um

      return Observable.from(this.banners);

    Werden Sie auch brauchen, um hinzuzufügen:

    import 'rxjs/add/observable/from';

    1. Dies ist eine schlechte Praxis und beinhaltet den gesamten rxjs-Bibliothek in Ihrem code:

      import { Observable } from 'rxjs';

    Importieren nur das, was Sie brauchen. Ersetzen Sie die oben mit

    import { Observable } from 'rxjs/Observable';
    Danke, ich habe die import-wie dies ursprünglich, aber ich entfernt es beim testen, ich habe es geändert zurück. Aus irgendeinem Grund war ich immer Fehlermeldungen, die bei der Verwendung zu Beobachten.so änderte ich es zu Beobachten.der Vorschlag Sajeetharan und den Fehler behoben.
    Es scheint, dass Punkt 2 hat sich vor kurzem geändert, siehe: RxJS 6 Änderungen - Übersicht "Import-Anweisung.
    Stimmt, ich gebloggt über RxJS 6 hier: yakovfain.com/2018/05/02/...

    InformationsquelleAutor Yakov Fain

Schreibe einen Kommentar