angular – 在’OperatorFunction’类型上不存在属性’subscribe’

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

“Property ‘subscribe’ does not exist on type ‘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);
    }
  );
 }

 }

解决方法

您正在getRecipes方法中调用您的HTTP调用订阅. subscribe的返回值是Subscription类型,而不是Observable.因此,您不能在storeRecipes方法中使用该值,因为无法观察到订阅;只有一个Observable可以.

而且,你的getRecipes逻辑很糟糕.您在getRecipes中调用HTTP后使用map,但在它之前有一个分号.你有没有执行这段代码？它不是有效的TypeScript / Angular / RxJS,也不会编译.

您可以正确链接您的运算符(使用旧的RxJS语法),或者使用pipeable operators,如下面的示例(新的RxJS语法).

将你的getRecipes函数改为this,它应该工作：

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

并确保导入地图并点击rxjs /运算符：

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