Подписка не является ошибкой функции

Я пытаюсь подписаться на наблюдаемый из службы, он создается без ошибок, но при просмотре в браузере я получаю сообщение об ошибке «this.service.getBanners(...).subscribe не является функцией».

Обслуживание:

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

Любые идеи, что я делаю неправильно?


angular angular-observable angular-services
person Steve    schedule 15.08.2017    source источник

Ответы (2)


arrow_upward
34
arrow_downward

Вы должны вернуть наблюдаемое, вместо этого вы возвращаете массив:

Для Angular ‹= 5.x.x

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

Для Angular >= 6.x.x

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

Справочник

person Sajeetharan    schedule 15.08.2017
comment
Спасибо, это исправило ошибку. Я также изменил импорт, как рекомендовал Яков Фаин в его ответе, и также импортировал импорт «rxjs/add/observable/of». У меня есть *ngFor с асинхронным каналом, но он не обновляется, когда я вызываю setBanners и изменяю содержимое массива баннеров. - person Steve; 16.08.2017

arrow_upward
7
arrow_downward

Пара вещей, которые нужно исправить.

  1. Вы объявляете, что ваша функция getBanners() возвращает Observable, но вы возвращаете массив. Поэтому измените оператор возврата на

    return Observable.from(this.banners);

Вам также нужно будет добавить это:

import 'rxjs/add/observable/from';

  1. Это плохая практика, и в ваш код будет включена вся библиотека rxjs:

    import { Observable } from 'rxjs';

Импортируйте только то, что вам нужно. Замените вышеуказанное на

import { Observable } from 'rxjs/Observable';
person Yakov Fain    schedule 15.08.2017
comment
Спасибо, изначально у меня был такой импорт, но я удалил его при тестировании, я изменил его обратно. По какой-то причине я получал сообщение об ошибке при использовании Observable.from, поэтому я изменил его на Observable.of, как предложил Саджитаран, и это исправило ошибку. - person Steve; 16.08.2017
comment
Похоже, пункт 2 недавно изменился, см.: Изменения RxJS 6 — Обзор заявления об импорте. - person insertusernamehere; 18.09.2018
comment
Правда, я писал о RxJS 6 здесь: yakovfain.com/2018/05/02/ - person Yakov Fain; 19.09.2018