Свойство «подписка» не существует для типа «OperatorFunction»'

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.Это функции, которые вы передаете методу .pipe Observables для работы с элементами, испускаемыми Observable.Вы также можете позвонить .subscribe на Observables.Операторы не имеют метод .subscribe.

this.httpClient.get(...).pipe(
  map(...)
).subscribe(...);

Вы передаете map, оператор, в .pipe.Вы также вызываете .subscribe на самой наблюдаемой.

Answer 2

Одна вещь, которая меня покорила, - это статическая и конвейерная версия многих функций.

Например, combineLatest(a$, b$).subscribe() выдаст вам аналогичную ошибку около OperatorFunction<T,R> (T и R будут варьироваться в зависимости от ваших наблюдаемых) , если вы импортируете его из rxjs / operator! Импортируйте его из rxjs и нет проблем.

Если вы играете с чем-то, ваша IDE вполне может автоматически импортировать из rxjs / операторов, а не изменять ее, когда вы пытаетесь использовать ее вне канала.

Answer 3

Вы звоните subscribe по вашему HTTP-вызову в методе getRecipes.Возвращаемое значение subscribe имеет тип Subscription, а не Observable.Таким образом, вы не можете использовать это значение в вашем storeRecipes методе, потому что Subscription не может наблюдаться;может только 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';