订阅不是函数错误

Posted 2023-03-07

【中文标题】订阅不是函数错误

【英文标题】：Subscribe is not a function error

【发布时间】：2018-01-23 16:19:51

【问题描述】：

我正在尝试从服务订阅 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);
    

任何想法我做错了什么？

【参考方案1】：

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

对于 Angular

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

对于 Angular >= 6.x.x

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

Reference

【讨论】：

谢谢，这修正了错误。我还按照 Yakov Fain 在他的回答中的建议更改了导入，并导入了 import 'rxjs/add/observable/of' 。我有一个带有异步管道的 *ngFor，但是当我调用 setBanner 并更改横幅数组的内容时它不会更新。

【参考方案2】：

需要解决一些问题。

你声明你的函数 getBanners() 返回一个 Observable，但你返回一个数组。因此，将您的 return 语句更改为

return Observable.from(this.banners);

您还需要添加以下内容：

import 'rxjs/add/observable/from'; 

这是不好的做法，会将整个 rxjs 库包含到您的代码中：

import Observable from 'rxjs';

只导入你需要的东西。将以上内容替换为

import  Observable  from 'rxjs/Observable'; 

【讨论】：

谢谢，我原来确实有这样的导入，但我在测试时删除了它，我已经把它改回来了。出于某种原因，我在使用 Observable.from 时遇到了错误，所以我按照 Sajeetharan 的建议将其更改为 Observable.of 并修复了错误。

最近第2点好像变了，见：RxJS 6 Changes - Overview "Import Statement。

没错，我在这里写了关于 RxJS 6 的博客：yakovfain.com/2018/05/02/…