RxJS Observable:'跳过不是函数'(或任何其他函数)
我得到一个奇怪的错误与RxJS,得到'方法不是一个函数'。RxJS Observable:'跳过不是函数'(或任何其他函数)
我确实导入了Observable库。 我已经得到Observable数组没有提出错误。
但是,当我做一个跳过,或采取,我得到这个错误。
如果我正确地读出:
返回一个可观察的是跳过由 源可观察到发射的第一计数的项目。
正如我观察到的包含文章,它应该在可观测直接跳到X条?
下面是代码
import { Component, OnInit } from '@angular/core';
import { Article} from '../../model/article';
import { ArticleService} from '../../model/article.service';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Component({
selector: 'app-liste-article',
templateUrl: './liste-article.component.html',
styleUrls: ['./liste-article.component.css']
})
export class ListeArticleComponent implements OnInit {
articles: Observable<Article[]>;
articlesPage: Observable<Article[]>;
selectedArticle: Article;
newArticle: Article;
page = 1;
itemPerPage = 2;
totalItems = 120;
constructor(private router: Router, private articleService: ArticleService) {
}
ngOnInit() {
this.articles = this.articleService.getArticles();
this.articlesPage = this.articles.skip((this.page - 1) * this.itemPerPage).take(this.itemPerPage);
//this.articlesPage = this.articles.slice( (this.page - 1) * this.itemPerPage , (this.page) * this.itemPerPage);
}
onSelect(article: Article) {
this.selectedArticle = article;
this.router.navigate(['../articles', this.selectedArticle.id ]);
}
onPager(event: number): void {
console.log('Page event is' , event);
this.page = event;
this.articlesPage = this.articles.skip((this.page - 1) * this.itemPerPage).take(this.itemPerPage);
console.log('tab' , this.articlesPage.count());
//this.articleService.getArticles().then(articles => this.articles = articles);
}
getArticles(): void {
this.articles = this.articleService.getArticles();
}
createArticle(article: Article): void {
//this.articleService.createArticle(article)
//.then(articles => {
// this.articles.push(articles);
// this.selectedArticle = null;
//});
}
deleteArticle(article: Article): void {
//this.articleService
// .deleteArticle(article)
// .then(() => {
// this.articles = this.articles.filter(b => b !== article);
// if (this.selectedArticle === article) { this.selectedArticle = null; }
//});
}
}
我试图直接与.skip(1)
使用它,但得到了同样的错误。
我查了官方文件RxJS Observable,它对我来说很合适。看来情况是好的,就像我对该函数的调用一样。这两个arryas都是可观察的,所以我应该能够在一个上使用这些函数,并将结果放在另一个正确的位置?
我没有看到这里有什么问题,可能是一个小细节,但不能亲自看到它(因为我从这开始,我看不到更多细节)。
你想导入skip
和take
为您与map
和catch
做了同样的方式。
import 'rxjs/add/operator/skip';
import 'rxjs/add/operator/take';
但是这些函数在Observable中已经包含了吗?这就是为什么我没有导入它们(地图和捕捉是重复的,所以我让他们在这里)。 –
您正在导入可观察类: '从'rxjs/Rx'导入{Observable};' 运算符对于模块性是分开的(并且使我们烦恼)。 – UncleDave
我明白了。如果你不得不在你的TS文件中导入你需要的每个函数,那么令人失望。 –
我的直觉怀疑,你应该这样做'进口“rxjs /添加/运营/ skip'但我可能是错的。 –
确实。正如UncleDave所说的那样。我认为它被包含在Observable Import中。 –
你能分享this.articleService.getArticles()代码吗? –