ошибка TS2322: тип '() => Observable <>' не может быть назначен типу 'Observable <>'

Question

Я пытаюсь кэшировать некоторые статические данные в приложении Angular CLI, которое я создаю с использованием rxjs.

Я следовал этому уроку: https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html

Моя настройка:

• Angular Cli Version: 6.0.8
• Угловая версия сердечника: 5.2.11
• rxjs Версия: 5.5.11

Но я получаю эту странную ошибку в ng serve:

ошибка TS2322: Тип '() => Наблюдаемый' нельзя назначить типу 'Наблюдаемый'. Свойство _isScalar отсутствует в типе '() => Наблюдаемый'.

И следующая ошибка в моей консоли Google Chrome:

*strategy.html:60 ERROR Error: InvalidPipeArgument: 'function () {
        if (!this.cacheStrategies) {
            console.log("Strategies Cache Empty - reloading");
            this.cacheStrategies = this.getStrategies().pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_2__["shareReplay"])(CACHE_SIZE));
        }
        return this.cacheStrategies;
    }' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:4283)
    at AsyncPipe.push../node_modules/@angular/common/esm5/common.js.AsyncPipe._selectStrategy (common.js:5732)
    at AsyncPipe.push../node_modules/@angular/common/esm5/common.js.AsyncPipe._subscribe (common.js:5714)
    at AsyncPipe.push../node_modules/@angular/common/esm5/common.js.AsyncPipe.transform (common.js:5688)
    at Object.eval [as updateDirectives] (GuidedTradeComponent.html:61)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)*

Это то, что у меня есть в dataservice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, shareReplay } from 'rxjs/operators';

const CACHE_SIZE = 1;

@Injectable()
export class DataService {

  constructor(private http:HttpClient) {}

  private cacheStrategies: Observable<Array<StrategyI>>;

  private getStrategies() {
      return this.http.get<StrategyResponse>('api.optionstrac.com/strategy').pipe(
        map(response => response.value)
      );
  }

  getStrategiesO() {
    if (!this.cacheStrategies) {
      console.log("Strategies Cache Empty - reloading");
      this.cacheStrategies = this.getStrategies().pipe(
        shareReplay(CACHE_SIZE)
      );
    }
    return this.cacheStrategies;
  }

}

export interface StrategyI {
  stratId: number;
  stratName: string;
  stratDesc: string;
  stratBe? : string;           
  stratAlsoKnownAs? : string;  
  stratMoreInfoUrl? : string;
}

export interface StrategyResponse {
  type: string;
  value: Array<StrategyI>;
} 

Это то, что у меня есть в Strategy.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService, StrategyI } from '../../services/data.service';

@Component({
  selector: 'strategy',
  templateUrl: './strategy.html',
  styleUrls: ['./strategy.css']
})

export class StrategyComponent implements  OnInit {

  strategies: Observable<Array<StrategyI>>;

    constructor( private dataService: DataService )

  ngOnInit() {
    this.strategies = this.dataService.getStrategiesO;     <--- line with ERROR
  }
}

Наконец, вот что у меня есть для strategy.component.html

  <select id="Strategy" formControlName="Strategy" >  
    <option value="0">--Select--</option>  
    <option *ngFor="let strategy of strategies | async" value={{strategy.stratId}}>{{strategy.stratName}}</option>  
  </select> 

Я также попытался изменить строку:

import { Observable } from 'rxjs/Observable';

просто:

import { Observable } from 'rxjs';

Но я ничего не пытаюсь заставить его работать ....

Answer 1

Кажется, что у вас есть опечатка там

ngOnInit() { this.strategies = this.dataService.getStrategiesO; <--- line with ERROR }

если должно быть:

ngOnInit() { this.strategies = this.dataService.getStrategiesO(); <--- the brackets }

Я искренне надеюсь, что это не причина

Answer 2

Я заставил его работать так, чтобы данные кэшировались в Angular с использованием Observable и rxjs

Dataservice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, shareReplay } from 'rxjs/operators';

const CACHE_SIZE = 1;

@Injectable()
export class DataService {

  constructor(private http:HttpClient) {}

  private cacheStrategies: Observable<StrategyI[]>;     <---- changed this line

  private getStrategies() {
      return this.http.get<StrategyI[]>('http://api.optionstrac.com/strategy');
      //cast straight to Strategy interface array and removed the pipe and the map
  }

  get getStrategiesO() {             <---- was missing the get
    if (!this.cacheStrategies) {
      console.log("Strategies Cache Empty - reloading");
      this.cacheStrategies = this.getStrategies().pipe(
        shareReplay(CACHE_SIZE)
      );
    }
    else {
      console.log("Strategies loaded from Cache");
    }   
    return this.cacheStrategies;
  }

}

export interface StrategyI {
  stratId: number;
  stratName: string;
  stratDesc: string;
  stratBe? : string;           
  stratAlsoKnownAs? : string;  
  stratMoreInfoUrl? : string;
}
// no longer needed strategyresponse interface

in Strategy.component.ts

//strategies: Observable<Array<StrategyI>>;
strategies: Observable<StrategyI[]>;      <--- had to keep as Observable, but got rid of array

ngOnInit() {
  this.strategies = this.dataService.getStrategiesO;
}

Answer 3

getStrategiesO это функция, вызывайте ее, теперь вы просто пытаетесь скопировать эту функцию в strategies

  ngOnInit() {
    this.strategies = this.dataService.getStrategiesO();
  }