订阅不是函数错误

Question

我正在尝试从服务订阅 observable，它构建时没有错误，但在浏览器中查看时出现错误“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);
    }
}

任何想法我做错了什么？

Answer 1

您应该返回一个 observable ，而不是返回一个数组：

对于 Angular

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

对于 Angular >= 6.x.x

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

Reference

Answer 2

需要解决一些问题。

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