[英]Property 'subscribe' does not exist on type 'OperatorFunction<Response, Recipe[]>'
I'm trying to fetch data from firebase
, but facing an error 我正在尝试从
firebase
获取数据,但面临错误
"Property 'subscribe' does not exist on type 'OperatorFunction'"
“类型'OperatorFunction'上不存在”属性'订阅'“
any idea? 任何想法? whats missing here?
什么在这里失踪?
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);
}
);
}
}
One thing that got me, there is a static and a pipeable version of many functions. 有一件事让我产生了许多功能的静态版本和可管理版本。
For example, combineLatest(a$, b$).subscribe()
will give you a similar error about OperatorFunction<T,R>
(T and R will vary based on your observables) if you import it from rxjs/operators! 例如, 如果从rxjs /运算符导入它 ,则
combineLatest(a$, b$).subscribe()
将给出类似的关于OperatorFunction<T,R>
错误(T和R将根据您的observable而变化) ! Import it from rxjs and no problemo. 从rxjs导入它没有问题。
If you're playing around with something, your IDE might very well auto-import from rxjs/operators, and not change it when you try and use it outside a pipe. 如果您正在玩某些东西,您的IDE可能会很好地从rxjs /运算符自动导入,并且当您尝试在管道外使用它时不会更改它。
You are calling subscribe
on your HTTP call in the getRecipes
method. 您正在
getRecipes
方法中调用您的HTTP调用subscribe
。 The return value of subscribe
is of type Subscription
, not Observable
. subscribe
的返回值是Subscription
类型,而不是Observable
。 Thus, you cannot use that value in your storeRecipes
method, because a Subscription
cannot be observed; 因此,您不能在
storeRecipes
方法中使用该值,因为无法观察到Subscription
; only an Observable
can. 只有一个
Observable
可以。
Moreover, your getRecipes
logic is bad. 而且,你的
getRecipes
逻辑很糟糕。 You use map
after your HTTP call in getRecipes
, however there is a semicolon before it. 您在
getRecipes
调用HTTP后使用map
,但在它之前有一个分号。 Did you even execute this code? 你有没有执行这段代码? It is not valid TypeScript/Angular/RxJS and will not compile.
它不是有效的TypeScript / Angular / RxJS,也不会编译。
You can either chain your operators properly (using the old RxJS syntax), or use pipeable operators as in my example below (the new RxJS syntax). 您可以正确链接您的运算符(使用旧的RxJS语法),或使用可管理的运算符 ,如下面的示例(新的RxJS语法)。
Change your getRecipes
function to this and it should work: 将你的
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);
})
);
}
And make sure to import map
and tap
from rxjs/operators
: 并确保导入
map
并tap
rxjs/operators
:
import { map, tap } from 'rxjs/operators';
You want to use pipeable operators with RxJS. 您希望将可管理运算符与RxJS一起使用。 These are functions that you pass to the
.pipe
method of Observables to operate on elements emitted by the Observable. 这些函数可以传递给Observables的
.pipe
方法,以对Observable发出的元素进行操作。 You can also call .subscribe
on Observables. 您也可以在Observables上调用
.subscribe
。 Operators do not have a .subscribe
method. 运营商没有
.subscribe
方法。
this.httpClient.get(...).pipe(
map(...)
).subscribe(...);
You pass map
, the operator, into .pipe
. 您将
map
(操作员)传递到.pipe
。 You also call .subscribe
on the observable itself. 你也可以在observable本身上调用
.subscribe
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.