类型'OperatorFunction <Response,Recipe []>'上不存在属性'subscribe'

Question

我正在尝试从中获取数据firebase,但面临错误

"类型'OperatorFunction'上不存在"属性'订阅'"

任何的想法？什么在这里失踪？

import { Injectable } from '@angular/core';
import {HttpClient, HttpResponse} from '@angular/common/http';
import {Response} from '@angular/http';
import {RecipeService} from '../recipes/recipe.service';
import {Recipe} from '../recipes/recipe.model';
import {map} from 'rxjs/operators';


@Injectable({
 providedIn: 'root'
})
export class DataStorageService {

 constructor(private httpClient: HttpClient,
          private recipeService: RecipeService) {}

 storeRecipes() {
    return this.httpClient.put('https://ng-recipe-10b53.firebaseio.com/recipes.json',
      this.recipeService.getRecipes());
 }

  getRecipes() {
this.httpClient.get('https://ng-recipe-book.firebaseio.com/recipes.json');
  map(
    (response: Response) => {
      const recipes: Recipe[] = response.json();
      for (const recipe of recipes) {
        if (!recipe['ingredients']) {
          recipe['ingredients'] = [];
        }
      }
      return recipes;
    }
  )
  .subscribe(
    (recipes: Recipe[]) => {
      this.recipeService.setRecipes(recipes);
    }
  );
 }

 }

Answer 1

有一件事让我产生了许多功能的静态版本和可管理版本.

例如,如果从rxjs /运算符导入它,combineLatest(a$, b$).subscribe()会给你一个类似的错误OperatorFunction<T,R>(T和R会因你的observable而异)! 从rxjs导入它没有问题.

如果您正在玩某些东西,您的IDE可能会很好地从rxjs /运算符自动导入,并且当您尝试在管道外使用它时不会更改它.

Answer 2

您正在使用方法调用subscribeHTTP调用getRecipes。返回值的subscribe类型Subscription不是Observable。因此，您不能在storeRecipes方法中使用该值，因为Subscription无法观察到a。只有一个Observable。

而且，你的getRecipes逻辑是不好的。您map在中的HTTP调用后使用getRecipes，但是在它前面有一个分号。您是否执行过此代码？它是无效的TypeScript / Angular / RxJS，将无法编译。

您可以正确地链接运算符（使用旧的RxJS语法），也可以使用可管道运算符，如下面的示例（新的RxJS语法）所示。

将您的getRecipes功能更改为此，它应该起作用：

getRecipes() {
    this.httpClient
        .get('https://ng-recipe-book.firebaseio.com/recipes.json')
        .pipe(
            map((response: Response) => {
                const recipes: Recipe[] = response.json();
                for (const recipe of recipes) {
                    if (!recipe['ingredients']) {
                        recipe['ingredients'] = [];
                    }
                }
                return recipes;
            }),
            tap((recipes: Recipe[]) => {
                this.recipeService.setRecipes(recipes);
            })
        );
}

并确保导入map和tap来自rxjs/operators：

import { map, tap } from 'rxjs/operators';