web-dev-qa-db-ja.com

購読は機能エラーではありません

サービスからオブザーバブルをサブスクライブしようとしていますが、エラーなしでビルドされますが、ブラウザーで表示すると「this.service.getBanners（...）。subscribe is not a function」というエラーが表示されます。

サービス：

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

}

成分：

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

私が間違っていることはありますか？

angularangular-servicesangular-observable
19
Steve

オブザーバブルを返す必要がありますが、代わりに配列を返します。

Angular <= 5.x.xの場合

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

For Angular> = 6.x.x

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

参考

26
Sajeetharan

修正すべきいくつかのこと。

  1. 関数getBanners（）がObservableを返すことを宣言しますが、配列を返します。したがって、returnステートメントを次のように変更します

    return Observable.from(this.banners);

これも追加する必要があります。

import 'rxjs/add/observable/from';

  1. これは悪い習慣であり、rxjsライブラリ全体をコードに含めます。

    import { Observable } from 'rxjs';

必要なものだけをインポートします。上記のものを

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